$(document).ready(function(){
    /**  
     * 天地图内容  
     */  
    var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {  
            maxZoom: 18,  
            minZoom: 2  
        }),  
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {  
            maxZoom: 18,  
            minZoom: 2  
        }),  
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {  
            maxZoom: 18,  
            minZoom: 2  
        }),  
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {  
            maxZoom: 18,  
            minZoom: 2  
        });
        
    var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {  
        maxZoom: 16,  
        minZoom: 1  
    });  
  	
  	var newmap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png');
  	
    var normal = L.layerGroup([normalm, normala]),  
        image = L.layerGroup([imgm, imga]);  
   
         var baseLayers = {  
        "天地图": normal,  
        "天地图影像": image,
        "智图灰色": normalm4,
        "新地图": newmap,
    }
        
    
    var map = L.map("map", {  
        center: [27.98427566436123, 120.68041992606597],  
        zoom: 12,  
//      layers: [normalm4],
        layers: [normal],
        zoomControl: false  
    });  
  	
  	
    L.control.layers(baseLayers, null).addTo(map);  
    L.control.zoom({  
        zoomInTitle: '放大',  
        zoomOutTitle: '缩小'  
    }).addTo(map);  
      
    	var list = [];
		var list2 = [];
		var list3 = [];
		var nodes = [];
		var count = 1;
		var count1 = 0
		var b = 0
		var jishu = 0;
		var stop = 0;
		var action = true;
		var fg, flag;
		var x = 28.02376523468831 - 28.020469307572167//28.019919976576134
		var y = 120.66282033920290 - 120.66672563552858
		var reaceselect_flag = true;
		var road_point, road_point_list = [], RS, RS_list = [], RS_list_detial = [], RS_list_detial1 = [];
		
//**********************************************获取路口,和所有路段***********************************************//
		$(function(){
			var show_taxi_flow_f = true;
			$( "#show_taxi_flow" ).on("click", function(){
				if(show_taxi_flow_f){
					show_taxi_flow_f = false;
					$( "#taxi_table" ).css("display", "none")
					$( "#flow_table" ).css("display", "block")
				}else{
					show_taxi_flow_f = true;
					$( "#taxi_table" ).css("display", "block")
					$( "#flow_table" ).css("display", "none")
				}
			})
			var data = {"x":132.3242432,"y":12.32356622}
			var jsondata = JSON.stringify(data)
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/posttest1/",
			  	success: function(result){
			  		road_point = result.data;	
			  		for (i=0; i<road_point.length; i++){
			  			road_point_list.push([
			  				parseFloat(road_point[i].lat),
			  				parseFloat(road_point[i].lng)
			  			])
			  		}
		  		},
		  		dataType: 'JSON',
			});
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_4/",
			  	success: function(result){
			  		RS = result.data;
			  		for(var i = 0; i<RS.length; i++){
			  			RS_list.push(RS[i].R);
			  		}
			  		for(var i = 0; i<RS_list.length; i++){
			  			var xyz = [];
			  			for(var j = 0; j<RS_list[i].length; j++){
			  				xyz.push(RS_list[i][j].lat);
			  				xyz.push(RS_list[i][j].lng);
			  			};
			  			RS_list_detial.push(xyz);
			  		};
			  		for(var k = 0; k<RS_list.length; k++){
			  			var jk = RS_list[k].length-1;
			  			RS_list_detial1.push([
			  				[parseFloat(RS_list[k][0].lat),
			  				parseFloat(RS_list[k][0].lng)],
			  				
			  				[parseFloat(RS_list[k][jk].lat),
			  				parseFloat(RS_list[k][jk].lng)],
			  			])
			  		}
//			  		console.log(RS_list);
		  		},
		  		dataType: 'JSON',
			});
		});
		
		var abac = 480;
//		var flag_globle = self.setInterval(get_taxiData, 5000)
		get_taxiData();
		function get_taxiData(){
			if(abac == 1439){abac = 1}
			var data = {"x":1,"y": abac}
			var jsondata = JSON.stringify(data)
			yyy = 0;
			xxx_f = true;
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_6/",
			  	success: function(result){
			  		yyy = result.data;
			  		initial1(yyy);
		  		},
		  		dataType: 'JSON',
			});
			abac  = abac+1;
		}
		function initial1(A){
			d3.selectAll(".taxi").remove();
			let c3 = d3.rgb(229,245,8), c4 = d3.rgb(245,75,8);
			var compute = d3.interpolate(c3,c4); 
			var linear = d3.scaleLinear()  
				           .domain([0,300])  
				           .range([0,1]);
			for(i = 0; i<300; i++){
					var pulsingIcon = L.icon.pulse({iconSize:[5,5],color: compute(linear(i)), fillColor:compute(linear(i)), extclassName:'taxi', heartbeat:1});
					var marker = L.marker(A[i].latlng,{icon: pulsingIcon}).addTo(map);
					};
			var dat1 = d3.selectAll(".taxi").data(A)
					     .on("mouseover", function(d){
					         var contant = "<p>car_nb:300<p>car_id:"+d.car_name+"<p>speed:"+d.speed+"</p>"
					         L.popup({className: "taxi_name"}).setLatLng(d.latlng)
	                                        				  .setContent(contant)
	                                                          .addTo(map);
					            })
					            .on("mouseout", function(d){d3.selectAll(".taxi_name").remove();})
		}
		
		function clear6(){
			$("#clock").fadeOut(800);
//			$("#clock").transition()
//		               .duration(800)
//		               .attr("width", 0)
//		               .remove()
			d3.selectAll(".taxi").remove();
//			window.clearInterval(flag_globle);
		}
//*********************************************************************************************//		
		
		//点击地图获取坐标
		var onMapclickCount = 0, onMapclickPointer = [];
		function onMapclick(e,latlngCount){
			if(onMapclickCount<2){
				var a = e.latlng;
				console.log(a)
				onMapclickPointer.push(a);
				let latlngString = a.lat.toString().substring(0,7)+"&"+a.lng.toString().substring(0,8);
				if(onMapclickCount==0){
					var orangeMarker = L.AwesomeMarkers.icon({
									    icon: 'coffee',
									    markerColor: 'orange',
									    extraClasses:'fa-home haha',
									  });
					var marker = L.marker(a, {
							icon: orangeMarker,
							title:"Star",
						 }).addTo(map).on("click", pointListremove);
//					console.log(latlngString)
					$("#originInput").val(latlngString).css({
							"color": "black",
							"font-weight": "600",
						})
				}else{
					var greenMarker = L.AwesomeMarkers.icon({
									    icon: 'coffee',
									    markerColor: 'green',
									    extraClasses:'fa-university',
									  });
					var marker = L.marker(a, {
							icon: greenMarker,
							title:"End",
						 }).addTo(map).on("click", pointListremove);
					$("#destinationInput").val(latlngString).css({
							"color": "black",
							"font-weight": "600",
						})
				}
				onMapclickCount++;
				console.log(onMapclickPointer)
			}
			function pointListremove(e){
	    		this.remove();
	    		for(let i = 0; i<onMapclickPointer.length; i++){
						if(onMapclickPointer[i] == e.latlng){
							onMapclickPointer.splice(i,1);
							break;
						}
					}
	    		onMapclickCount--;
	    		console.log(onMapclickPointer);
	    	}
		}
		
//***************************************select添加option******************************************************//
		var taxiName = ['浙C01568', '浙C02668', '浙C02678', '浙C03860', '浙C04248', '浙C04337', '浙C04348', '浙C04351', '浙C04628', '浙C04651', '浙C04652', '浙C04658', '浙C04673', '浙C04675', '浙C04876', '浙C04937', '浙C04974', '浙C05132', '浙C05135', '浙C05196', '浙C05202', '浙C05203', '浙C05215', '浙C05225', '浙C05228', '浙C07112', '浙C08317', '浙C10257', '浙C10338', '浙C105BN', '浙C12696', '浙C13678', '浙C13722', '浙C15029', '浙C16259', '浙C16260', '浙C18667', '浙C18A59', '浙C19560', '浙C20662', '浙C20933', '浙C27306', '浙C28P16', '浙C34980', '浙C39986', '浙C88Y07', '浙CA0356', '浙CA0358', '浙CA1985', '浙CA6918', '浙CA9163', '浙CA9332', '浙CA9502', '浙CA9603', '浙CAD965', '浙CAD997', '浙CAG202', '浙CAH085', '浙CAJ887', '浙CAK061']
		for (var i =0; i<taxiName.length+1; i++){
			if (i == 0){
				$("#se1").append("<option value='-1'></option>");
			}else{
				var option1 = document.createElement("option");
				$(option1).text(taxiName[i-1]);
			}		
			$('#se1').append(option1);
		}
		$(".chosen-select").chosen()
//*********************************************************************************************//
		
//***************************************选择框模式******************************************************//
		//map.dragging.disable(); map.dragging.enable();
		var RS_set = [];
		var index_d = [];
		$("#cli_select").on("click", function(){
			if(reaceselect_flag){
				map.dragging.disable();
				$("#i1").removeClass("fa-hand-pointer-o").addClass("fa-hand-stop-o").attr("title", "Stop");
				$("#cli_select .sameI").css("color", "rgb(255, 255, 0)")
				select();
				reaceselect_flag = false;
			}else{
				map.dragging.enable();
				$("#i1").removeClass("fa-hand-stop-o").addClass("fa-hand-pointer-o").attr("title", "Select");
				$("#cli_select .sameI").css("color", "#5E6268")
				reaceselect_flag = true;
				map.off("mousedown");
				map.off("mouseup");
				map.off("mousemove");
			};
			})

		function select(){
			var caldot;
			var startpoint, endpoint, rectarea;
			map.on("mousedown", function(e) {
					for(var j = 0; j<RS_set.length; j++){
						var A = "road"+(RS_set[j]-1)
						d3.select('.'+A).attr("stroke", "red")
										.attr("stroke-opacity", '0.7')
										.attr("stroke-width", '5')				
					}
					RS_set = [];
					index_d = [];
					startpoint = e.latlng;
//					console.log(startpoint);
					map.on("mousemove", function(e) {
							$(".rect").remove();
							var bounds = [];
							endpoint = e.latlng;
							bounds.push(startpoint);
							bounds.push(endpoint);
							rectarea = L.rectangle(bounds, {color: "#0D82D7", weight:1, opacity:0.5, className:"rect"}).addTo(map);
							rectarea.on("click", function(){this.remove();});// d3.selectAll(".leaflet-marker-icon").remove();});
							caldot = rectarea.getBounds();
					});
			});
		
			map.on("mouseup", function(e) {
					$(".rect").remove();
//					console.log("ok");
					map.off("mousemove");
//					for(i=0; i<road_point_list.length; i++){
//						var A = caldot.contains(road_point_list[i]);
//						if(A){
//							L.marker(road_point_list[i]).addTo(map);
//						};
//					};
					for(var i=0; i<RS_list_detial1.length; i++){

						var A = caldot.contains(RS_list_detial1[i][0]);
						var A1 = caldot.contains(RS_list_detial1[i][1]);
						if(A & A1){
							RS_set.push(i+1);
						}
					};
					for(var j = 0; j<RS_set.length; j++){
						var A = "road"+(RS_set[j]-1)
						d3.select('.'+A).data([j])
										.attr("stroke", "yellow")
										.attr("stroke-opacity", '1')
										.attr("stroke-width", '10')
										.on("click", function(d){
											d3.select(this).attr("stroke", "red")
														   .attr("stroke-opacity", '0.7')
														   .attr("stroke-width", '5')
											console.log(RS_set[d])
											index_d.push(RS_set[d]);
										})
					}
					
					caldot = 0;
			});
		};
//***************************************选择框模式******************************************************//

//***************************************根据所选道路画表******************************************************//
		
		$("#cli_chart").on('click', draw_flow_speed);
			
		function draw_flow_speed(){
			var week = ["Wednesday", "Thursday", "Friday" , "Saturday", "Sunday", "Monday", "Tuesday"]
			var RS_set1 = $("#datepicker2").val()
			RS_set1 = parseInt(RS_set1.substring(8, RS_set1.length))
			$("#we").text(week[(RS_set1-1)%7])
			for(var i = 0; i<index_d.length; i++){
				RS_set.splice(RS_set.indexOf(index_d[i]), 1)
			}
			var datas, data_speed;
			var datas1 = [], data_speed1 = [];
			var data = {"x":RS_set, "y":RS_set1}
			console.log(data)
			var dom = [];
			var leng;
			var jsondata = JSON.stringify(data)
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_5/",
			  	success: function(result){
			  			datas = result.data[0];
			  			data_speed = result.data[1];
			  			console.log(result.data)
//			  			if(RS_set.length>10){
//			  				leng = 10;
//			  			}else{
//			  				leng = RS_set.length;
//			  			}
						for(var i = 0; i<RS_set.length; i++){
							dom.push("R"+RS_set[i]);
						};
//						RS_set = [];
						chart_produce(datas,dom,data_speed);
		  		},
		  				dataType: 'JSON',
				});
				function chart_produce(datas,dom,data_speed){
					for(var i = 0; i<datas.length; i++){
						for(var j = 0; j<datas[i].length; j++){
							datas1.push(datas[i][j]);
							data_speed1.push(data_speed[i][j]);
						};
					};
//					console.log(datas1)
					drawrect(datas1,dom,data_speed1, svg1);
					drawrect1(datas1,dom,data_speed1, svg1_1);
				};
		}
		

//***************************************根据所选道路画表******************************************************//
		
//*********************************************画出租车轨迹，动画展示************************************************//		
		function draw_circle(A){
//			console.log(A)
//			.attr("fill-opacity", 0).attr("stroke-opacity", 0)
			d3.selectAll(".circle").transition()
			              		   .duration(2000)
			              		   .ease(d3.easeBackOut)
			              		   .attr("stroke-opacity", 0)
//			              		   .attr("fill-opacity", 0)
//			              		   .remove()
			
			d3.selectAll(".taxi").transition()
			              		  .duration(30)
			              		  .ease(d3.easeBackOut)
			              		  .remove()
			if(count == A.length-1){
				L.circle(A[count].latlng,{
		        	color: 'black',//颜色
		            fillColor: 'black',
		            fillOpacity:1,//透明度
		            weight: 5,
		            radius: 60,
		            className: 'circle'
		        	}).addTo(map)
			}else{
				L.circle(A[count].latlng,{
		        	color: '#F2701D',//颜色
		            fillColor: '#F2701D',
		            fillOpacity:1,//透明度
		            weight: 2,
		            radius: 60,
		            className: 'circle'
		        	}).addTo(map)
			}
		        	count += 1
		        	if(count > (A.length - 1)){
		        		xxx_f = true;
		        		xxx = 0;
						$("#i7").removeClass("fa-pause").addClass("fa-play").attr("title", "play").css("left", "3.5px");
		        		window.clearInterval(flag);
		        	}
		}
		
		var xxx, xxx_f = true, yyy, aaa, bbb, ccc;
		$("#taxi_switch").on("click",function(){
			d3.selectAll(".taxi").remove();
			d3.selectAll(".circle").remove();
			d3.selectAll(".nowclick").remove();
			clear1();
			clear3();
			clear4();
			clear5();
			clear6();
			aaa = $("#datepicker3").val(), bbb = $("#va4").val(), ccc = $("#va5").val();
			var b11 = parseInt(bbb.substring(0,2)), b12 = parseInt(bbb.substring(3,5));
			var c11 = parseInt(ccc.substring(0,2)), c12 = parseInt(ccc.substring(3,5));
			bbb = b11 * 60 + b12;
			ccc = c11 * 60 + c12;
			aaa = parseInt(aaa.substring(8, aaa.length))
			var data = {"x":aaa,"y":bbb}
			var jsondata = JSON.stringify(data)
			yyy = 0;
			xxx_f = true;
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_6/",
			  	success: function(result){
			  		yyy = result.data;
			  		initial(yyy);
		  		},
		  		dataType: 'JSON',
			});
		})
		function initial(A){
			
			count = 1;
			for(i = 0; i<A.length; i++){
					  			L.circle(A[i].latlng,{
					        	color: 'red',//颜色
					            fillColor: 'red',
					            fillOpacity:1,//透明度
					            weight: 5,
					            radius: 30,
					            className: 'taxi'
					        	}).addTo(map)
//					        	var pulsingIcon = L.icon.pulse({iconSize:[3,3],color:'red', extclassName:'taxi'});
//								var marker = L.marker(A[i].latlng,{icon: pulsingIcon}).addTo(map);
					};
					var dat1 = d3.selectAll(".taxi").data(A)
					            .on("mouseover", function(d){
					            	var contant = "<p>car_nb:"+A.length+"<p>car_id:"+d.car_name+"<p>speed:"+d.speed+"</p>"
					            	L.popup({className: "taxi_name"}).setLatLng(d.latlng)
	                                        .setContent(contant)
	                                        .addTo(map);
					            })
					            .on("mouseout", function(d){d3.selectAll(".taxi_name").remove();})
					            .on("click", function(d){
					            	console.log(d)
									var pulsingIcon = L.icon.pulse({iconSize:[10,10],color:'red', fillColor:'black', extclassName:'nowclick'});
									var marker = L.marker(d.latlng,{icon: pulsingIcon}).addTo(map);
					            	$("#bar").fadeIn(1000)
//					            	xxx = 0;
					            	var data = {"x":d.car_name,"y":bbb, "z": ccc, "k": aaa}
									var jsondata = JSON.stringify(data)
									$.ajax({
											type: 'post',
											data: jsondata,
											url: "http://127.0.0.1:8000/admin/post_view2.0_7/",
											success: function(result){
												xxx = result.data;
											},
											dataType: 'JSON',
									});					
					            });
		}
		
		$("#circle-contral1").on("click", function(){
			console.log(xxx);
			if(xxx_f){
				xxx_f = false;
				$("#i7").removeClass("fa-play").addClass("fa-pause").attr("title", "pause").css("left", "0px");
				flag = self.setInterval(draw_circle, 100, xxx)
			}else{
				xxx_f = true;
				$("#i7").removeClass("fa-pause").addClass("fa-play").attr("title", "play").css("left", "3.5px");
				window.clearInterval(flag);
			}
		})
		$("#circle-contral").on("mousedown", function(){
									$("#i6").css("color", "red");
								})
							.on("mouseup", function(){
									$("#i6").css("color", "black");
								})
							.on("click", function(){
									window.clearInterval(flag);
									d3.selectAll(".circle").remove()
									d3.select(".nowclick").remove()
									$("#i7").removeClass("fa-pause").addClass("fa-play").attr("title", "play").css("left", "3.5px");
									initial(yyy);
									count = 1;
									xxx = 0;
								})
		function clear2(){
			d3.selectAll(".taxi").remove();
			d3.selectAll(".circle").remove();
			d3.selectAll(".nowclick").remove();
			$("#bar").fadeOut(1000)
		}

//*********************************************画出租车轨迹，动画展示************************************************//		
//*******************************************选择路段显示出租车**************************************************// 
		var c_last;
     	$("#c").on('click',function(){
     		d3.selectAll(".temp").remove();
//   		d3.selectAll(".temp1").remove();
     		clear2();
     		clear3();
     		clear4();
     		clear6();
			var a = $("#va1").val();
			var b = $("#datepicker").val();
			var c = $("#se1").val();
			b = parseInt(b.substring(8, b.length));
			c = parseInt(c.substring(4, c.length));
			var a1 = parseInt(a.substring(0,2));
			var a2 = parseInt(a.substring(3,5));
			a = a1 * 60 + a2;
			console.log(a, b, c)
			var data = {"x": b, "y": c, "z": a}
			var jsondata = JSON.stringify(data)
				$.ajax({
				  	type: 'post',
				  	data: jsondata,
				  	url: "http://127.0.0.1:8000/admin/post_view2.0_1/",
				  	success: function(result){
				  		console.log(result.data)
				  		var aa = result.data.road
				  		if(c != c_last){
				  			d3.selectAll(".temp1").remove();
					  		if (aa.length == 8){
					  			L.polyline([[aa[0], aa[1]], [aa[2], aa[3]], [aa[4], aa[5]], [aa[6], aa[7]]], {color: 'red', weight: 8, opacity: 1, className: 'temp1'})
					  	     	 .addTo(map);
					  		}else if(aa.length == 6){
					  			L.polyline([[aa[0], aa[1]], [aa[2], aa[3]], [aa[4], aa[5]]], {color: 'red', weight: 8, opacity: 1, className: 'temp1'})
					  	     	 .addTo(map);
					  		}else if(aa.length == 4){
					  			L.polyline([[aa[0], aa[1]], [aa[2], aa[3]]], {color: 'red', weight: 8, opacity: 1, className: 'temp1'})
					  	     	 .addTo(map);
					  		}else{
					  			alert("你选择的路有误！请重新选择！")
					  		}
				  		}
				  		c_last = c;
				  		if (result.data.detail.length == 0){
				  			alert("此路段此时刻无出租车！")
				  		}else{
				  			for(i = 0; i<result.data.detail.length; i++){
					  			L.circle(result.data.detail[i].latlng,{
					        	color: 'black',//颜色
					            fillColor: 'black',
					            fillOpacity:1,//透明度
					            weight: 8,
					            radius: 16,
					            className: 'temp'
					        	}).addTo(map)
				  			}
				  		}
						
					var dat = d3.selectAll(".temp").data(result.data.detail)
					            .on("mouseover", function(d){
					            	var contant = "<p>car_nb:"+result.data.taxi_number+"<p>car_id:"+d.car_no+"<p>speed:"+d.speed+"</p>"
					            	L.popup({className: "ha"}).setLatLng(d.latlng)
	                                        .setContent(contant)
	                                        .addTo(map);
					            })
					            .on("mouseout", function(d){d3.selectAll(".ha").remove();})
			  			},
			  		dataType: 'JSON',
					});
			})
     	function clear1(){
     		d3.selectAll(".temp").remove();
     		d3.selectAll(".temp1").remove();
     	}
   
     	var c1 = d3.rgb(255,0,0);    //红色  
		var c2 = d3.rgb(247,255,0);    //绿色  
			   
		var compute = d3.interpolate(c2,c1); 
		var linear = d3.scaleLinear()  
			           .domain([0,30])  
			           .range([0,1]);
			           
		$("#color").on('click',function(){
			var data = {"x":132.3242432,"y":12.32356622}
			var jsondata = JSON.stringify(data)
			$.ajax({
			  	type: 'post',
			  	data: jsondata,
			  	url: "http://127.0.0.1:8000/admin/post_view2.0_2/",
			  	success: function(result){
			  		var res_carflow = result.data[result.data.length-1]
			  		var dt = [];
			  		for(var i = 0; i<result.data.length-1; i++){
			  			dt.push(result.data[i].R);
			  		}
			  		for(var j = 0; j<dt.length; j++){
			  			if(dt[j].length == 4){
			  				polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  							.addTo(map);
			  			}else if(dt[j].length == 3){
			  				polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  							.addTo(map);
			  			}else{
			  				polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  							.addTo(map);
			  					}
			  				}
		  				},
		  				dataType: 'JSON',
				});
			});
		
		//日期插件*******************************
		 $( "#datepicker1" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker2" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker3" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -3m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		$( "#datepicker4" ).datepicker({
		    showOtherMonths: true,
		    selectOtherMonths: true,
		    defaultDate: "-4y -2m -10d",
		    dateFormat: "yy-mm-dd",
  		});
  		//**************************************
  		var d1, tm;
  		var co = true;
  		var flow_set = []
		var road = [];
		var road_fist = []; 
  		$(".reloadbt").on("click", function(){
  			clear1();
  			clear2();
  			clear4();
  			clear5();
  			clear6();
  			var dt = $("#datepicker1").val();
  			var a = dt.substring(5,7)
  			var b = dt.substring(8,10)
  			var c = dt.substring(2,4)
  			var d = a;
		  	a = a + b;
		  	d1 = c + '/' + d + '/' + b;
		  	Read_data_draw(a, d1);
  		});
  		$("#icon1").on("click", function(){
  			var dt = $("#datepicker1").val();
  			var a = dt.substring(5,7)
  			var b = dt.substring(8,10)
  			var c = dt.substring(2,4)
  			var e = dt.substring(0,8)
  			var d = a;
		  	a = a + b;
		  	if(b == "01"){
		  		alert("No Yesterday!");
		  	}else{
		  		a = parseInt(a) -1;
		  		var aa = parseInt(b)-1
		  		if(aa<10){aa = "0"+ aa}else{aa = aa;};
		  		d1 = c + '/' + d + '/' + aa;
		  		aa = e + aa
		  		console.log(aa)
		  		$("#datepicker1").val(aa);
		  		Read_data_draw(a, d1);
		  	}
  		});
  		
  		$("#icon2").on("click", function(){
  			var dt = $("#datepicker1").val();
  			var a = dt.substring(5,7)
  			var b = dt.substring(8,10)
  			var c = dt.substring(2,4)
  			var e = dt.substring(0,8)
  			var d = a;
		  	a = a + b;
		  	if(b == "31"){
		  		alert("No Tomorrow!");
		  	}else{
		  		a = parseInt(a) +1;
		  		var aa = parseInt(b)+1
		  		if(aa<10){aa = "0"+ aa}else{aa = aa;};
		  		d1 = c + '/' + d + '/' + aa;
		  		aa = e + aa
		  		console.log(aa)
		  		$("#datepicker1").val(aa);
		  		Read_data_draw(a, d1);
		  	}
  		});
  		
  		
  		function Read_data_draw(a, d1){
					$.playBar.restTime(1000*tm-1);
				  	Stop();
				  	d3.selectAll(".road").remove();
				  	flow_set = [];
					road = [];
	  				$("#map").loading({});
		  			var tm1 = $("#va2").val(), tm2 = $("#va3").val();
		  			var tm11 = parseInt(tm1.substring(0,2)), tm12 = parseInt(tm1.substring(3,5));
					var tm21 = parseInt(tm2.substring(0,2)), tm22 = parseInt(tm2.substring(3,5));
					tm1 = tm11 * 60 + tm12;
					tm2 = tm21 * 60 + tm22;
					tm = tm2 -tm1;
					var data = {"x":a, "y":tm1, "z":tm2}
					var jsondata = JSON.stringify(data)
						$.ajax({
						  	type: 'post',
						  	data: jsondata,
						  	url: "http://127.0.0.1:8000/admin/post_view2.0_3/",
						  	success: function(result){
//						  		console.log(result)
						  		if(result.code == 0){
						  			removeLoading('loadingName');
						  			$("#toolbar").fadeIn(500);
						  			$("#pop2").html(d1 + '<br/>' + "00:00")
						  		}
						  		flow_set = result.data;
//						  		console.log(flow_set)
						  		road_fist = result.data[result.data.length - 1];
						  		draw_road_fist(road_fist);
						  		road = d3.selectAll(".road")
					  		},
					  		dataType: 'JSON',
							});
							$.playBar.addBar($('.test'),1000*tm-1);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
							$.playBar.changeBarColor("#72dfff");//设置进度条颜色
							$.playBar.Stop();
							$("#toolbar").css("top", $("#map").height()-28)
							$("#pop").css("top", $("#map").height()-56)
							$(".TimeBall").mouseover(function(){
														$("#pop").show();
													})
										  .mouseout(function(){
														$("#pop").hide();
													})
										  .mousemove(function(){
										  				var p = $(".BarBeginTime").html();
													  	var b = p.substring(0, 2);
														var c = p.substring(3, 5);
														var d = parseInt(b) * 60 + parseInt(c);
														var a = road.data(flow_set[d]).attr("stroke", function(d, i){var t = compute(linear(d)); return t});
										  })
							
					if(!action){
						action = true;
						$("#i3").removeClass("fa-pause").addClass("fa-play").attr("title", "Play").css("left", "1.5px");
					};
//					var left = $(".TimeBall").offset().left-25;
//					left = left + "px";
					$("#pop").css("left", "597px");
					var p = $(".BarBeginTime").html();
					$("#pop2").html(d1 + '<br/>' + p)
  		}
  		
  		//*******************************************设置播放器**************************************************//	
		$("#icon").on("click", function(){
								if(action){
									$.playBar.Begin();
									fg = setInterval(donghua, 1000);
									action = false;
									$("#i3").removeClass("fa-play").addClass("fa-pause").attr("title", "Pause").css("left", "0px");
									
								}else{
									$.playBar.Stop();
									Stop();
									action = true;
									$("#i3").removeClass("fa-pause").addClass("fa-play").attr("title", "Play").css("left", "1.5px");
								}
							});
  		
  		function draw_road_fist(A){
  			var res_carflow = A[A.length-1]
  			var compute = d3.interpolate(c2,c1); 
			var linear = d3.scaleLinear()  
				           .domain([0,d3.max(res_carflow)])  
				           .range([0,1]);
			var dt = [];
			for(var i = 0; i<A.length-1; i++){
			  		dt.push(A[i].R);
			  	}
			for(var j = 0; j<dt.length; j++){
			  		if(dt[j].length == 4){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  					    .addTo(map);
			  		}else if(dt[j].length == 3){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  						.addTo(map);
			  		}else{
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'road'})
			  						.addTo(map);
			  				}
			  			}
  		}
  		
  		function clear3(){
  			Stop();
			d3.selectAll(".road").remove();
			flow_set = [];
			road = [];
			$("#toolbar").fadeOut(500);
  		}
  		
//*******************************************显示所有路段和路口节点**************************************************//	
		var show_R_flag = true;
		$("#show_R").on("click", function(){
			clear1();
			clear2();
			clear3();
			clear4();
			clear6();
			if(show_R_flag){
				show_R_flag = false;
				var dt = [];
				let c111 = d3.rgb(255,0,0);
				let c222 = d3.rgb(198,250,10);
				let compute = d3.interpolate(c111,c222); 
				let linear = d3.scaleLinear()  
					           .domain([0,678])  
					           .range([0,1]);
				for(let i = 0; i<RS.length; i++){
				  		dt.push(RS[i].R);
				  	}
	//			console.log(dt)
				for(let j = 0; j<dt.length; j++){
				  		if(dt[j].length == 4){
				  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 1, weight: 5, className: 'road'+j})
				  					    .addTo(map);
				  		}else if(dt[j].length == 3){
				  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 1, weight: 5, className: 'road'+j})
				  						.addTo(map);
				  		}else{
				  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 1, weight: 6, className: 'road'+j})
				  						.addTo(map);
				  				}
				  			}
				for (let i=0; i<road_point.length; i++){
					L.circle(road_point[i],{
				        	color: 'white',//颜色
				            fillColor: '#14CA82',
				            fillOpacity: 1,//透明度
				            opacity: 1,
				            weight: 5,
				            radius: 20,
				            className: 'circle0'
				        	}).addTo(map)
				};
				}else{
					for(let i = 0; i<678; i++ ){
						var aaaa = "road"+i;
						d3.select("."+aaaa).remove();
					}
					d3.selectAll(".circle0").remove();
					show_R_flag = true;
				}
		});
		
		function clear5(){
			for(let i = 0; i<678; i++ ){
						d3.select(".road"+i).remove();
					}
					d3.selectAll(".circle0").remove();
			honeySwitch.showOff("#show_R")
			show_R_flag = true;
		}

//*********************************************************************************************//				
  		function donghua(){
  					var left = $(".TimeBall").offset().left-25;
  					left = left + "px";
  					$("#pop").css("left",left);
					var p = $(".BarBeginTime").html();
					var b = p.substring(0, 2);
					var c = p.substring(3, 5);
					var d = parseInt(b) * 60 + parseInt(c);
					console.log(d)
					$("#pop2").html(d1 + '<br/>' + p)
					var a = road.data(flow_set[d]).attr("stroke", function(d, i){var t = compute(linear(d)); return t});
				}
  		function Stop(){
			window.clearInterval(fg);
		}
		
		var wi = 550; //1101;
		var he = 275, he1 = he+25
		var y_st = 0;
		var y_ed = 5;
		$("#left_board").height(he1);
		$("#right_board").height(he1);
		
		
//*******************************************chart3流量速度等表格**************************************************//
		
		var don = ["R0", "R1", "R2", "R3", "R4", "R5", "R6", "R7", "R8", "R9"];
		var don_x = []
		for(let i = 0; i<25; i++){
			don_x.push(i+'H')
		}
		var padding = {top: 10, right: 50, bottom: 23, left: 10};
		var xAxisWidth = wi-padding.left-padding.right;
		var yAxisWidth = he-padding.bottom-padding.top;
		
		
		var svg1 = d3.select("#buju2").append("svg")
					.attr("width", wi)
					.attr("height", he)
					.attr("class", "svg1")
					
		var svg1_1 = d3.select("#buju2").append("svg")
					.attr("width", wi)
					.attr("height", he)
					.attr("class", "svg1_1")
		
		var yScale = d3.scaleBand()
		               .domain(don)
		               .range([yAxisWidth, 0])
		               
		
		var xScale = d3.scaleLinear()
		               .domain([0, 24])
		               .range([0, xAxisWidth])
		               
		var xAxis = d3.axisBottom(xScale)
		              .ticks(13)
		              
//		var yAxis = d3.axisLeft(yScale)
//					  .ticks(22);
		
		var gX = svg1.append("g")
		            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
		            .attr("class","gx")
		            .call(xAxis)
		            
		var gX = svg1_1.append("g")
		            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
		            .attr("class","gx1")
		            .call(xAxis)
		
//		var gY = svg.append("g")
//		            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
//		            .attr("class", "gy")
//		            .call(yAxis);
//		
//		
//		gY.selectAll("text")
//		  .attr('transform', 'rotate(-30)')
//*******************************************画分割线**************************************************//
//			var line1 = d3.select(".svg1").append("line")
//											 .attr("x1", wi-padding.right)
//											 .attr("y1", base_y)
//											 .attr("x2", wi-padding.right)
//											 .attr("y2", he - padding.bottom)
//											 .attr("stroke", "gray")
//											 .attr("class", "line2")
		
//*********************************************************************************************//

//*******************************************画方块**************************************************//
		function drawrect(dataset,dom, data_speed, svg){
			
			d3.select(".gx").remove();
			d3.select(".gy").remove();
			d3.select(".overlay").remove();
			d3.select(".tooltip").remove();
			d3.selectAll(".rect1").remove();
			d3.selectAll(".line1").remove();
			d3.selectAll(".line2").remove();
			d3.selectAll(".text1").remove();
			d3.select(".goback").remove();
			d3.select(".divshow").remove();
			d3.select(".colorDiv").remove();
			var c3 = d3.rgb(57,229,28), c4 = d3.rgb(229,62,28);
			var max_speed = d3.max(data_speed), min_speed = d3.min(data_speed);
			var compute1 = d3.interpolate(c2,c1); 
			var linear1 = d3.scaleLinear()  
				           .domain([max_speed, min_speed])  
				           .range([0,1]);
				           
			var colorNew = d3.scaleQuantize()
						  .domain([0, 1])
						  .range(["#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]);
			
			var yScale = d3.scaleBand()
			               .domain(dom)
			               .range([yAxisWidth, 0])
			               
//			var yAxis = d3.axisLeft(yScale)
//					  .ticks(12);
					  
			var xScale = d3.scaleLinear()
		               .domain([0, 24])
		               .range([0, xAxisWidth])
		               
			var xAxis = d3.axisBottom(xScale)
			              .ticks(13)
			
			var gY = svg.append("g")
			            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
			            .attr("class", "gy")
//			gY.call(yAxis);
			var gX = svg.append("g")
		            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
		            .attr("class","gx")
			gX.call(xAxis);
			
			var rectHeight = yScale.step(), rectWidth = xScale(1) - xScale(0); //矩形高度
			
			function draw_segline(don, H, svg){
				var base_y = padding.top+0.5;
				for(var i = 0; i<don.length; i++){
					var line = svg.append("line")
								  .attr("x1", padding.left)
								  .attr("y1", base_y+ i*H)
								  .attr("x2", xAxisWidth+padding.left)
								  .attr("y2", base_y+ i*H)
								  .attr("stroke", "gray")
								  .attr("class", "line1")
				};
			};
			draw_segline(dom, rectHeight, svg);
			
			
			var min = d3.min(dataset), max = d3.max(dataset);
			var dscale = d3.scaleLinear()
			               .domain([min,max])
			               .range([0, rectWidth])
			var g = svg.append("g");
			var colorset = ["#65AC50", "#CAE081", "#FDCD8E", "#F5814E", "#BD2019"]
			var rect = g.selectAll("rect")
						  .data(dataset)
						  .enter()
						  .append("rect")
						  .attr("fill", function(d,i){
						  	if(data_speed[i]==0){
						  		return "black"
						  	}else{
						  		return colorNew(linear1(data_speed[i]))
						  	}
						  })
						  .attr("x", function(d,j){
						  		return padding.left+0.5 
						  })
						  .attr("y", function(d, i){return padding.top+0.5 + rectHeight * (dom.length-1) })
						  .attr("height", rectHeight)
						  .attr("width", rectWidth)
						  .attr("class", "rect1");
						  
			var rectTran = rect.transition()
		                   .delay(function(d,i){return i*10})
		                   .duration(200)
		                   .attr("y", function(d,i){
						  	return (padding.top+0.5 + rectHeight * (dom.length-1)) - parseInt(i/24)*rectHeight
						  })
		                   .attr("x", function(d,j){
						  		return padding.left+0.5 + (j%24)*rectWidth
						  })

			recthaha();
						   
	        /***********************************************显示信息更友善***********************************************/
	       	var flow = [];
	       	for(var i = 0; i<24; i++){
	       		flow[i] = [];
	       		for(var j = dom.length-1; j >= 0; j--){
		       		flow[i].push({roadname: dom[j],
	            		       value:dataset[24*j+i],
	            		       speed:data_speed[24*j+i]
	            		     })
	       		};
	       	};
			var tooltip = d3.select("#buju2")
                            .append("div")
                            .attr("class","tooltip")
                            .style("opacity",0);
            var title = tooltip.append("div")
                               .attr("class", "title");
            var des_body = tooltip.append("div")
                               .attr("class", "des_body");
            var des = des_body.selectAll(".des")
                              .data(dom)
                              .enter()
                              .append("div")
                              .attr("class", "des");
            var desText = des.append("div")
                              .attr("class", "desText");
            
            var vLine = svg.append("line")
                           .attr("class", "focusLine")
                           .attr("stroke","black")
                           .attr("stroke-dasharray",5.5)//设置虚线
                           .style("display", "none");
            var H_tool = (dom.length+1)*30 + 9;
            var A_last;
          
			svg.append("rect")
			   .attr("class", "overlay")
			   .attr("x", padding.left)
			   .attr("y", padding.top)
			   .attr("width", xAxisWidth)
			   .attr("height", yAxisWidth)
			   .on("mouseover", function(){
			   	  tooltip.attr("height", H_tool)
			   	         .style("opacity", 1.0);
			   	   vLine.style("display", null);
			   })
			   .on("mouseout", function(){
			   	  tooltip.style("opacity", 0.0)
			   	  		 .style("left", "50px")
            	       	 .style("top", "50px");;
			   	  vLine.style("display", "none");
			   	  d3.select('.'+A_last).attr("stroke", "yellow")
									   .attr("stroke-opacity", '1')
									   .attr("stroke-width", '10')
			   	  
			   })
			   .on("mousemove", mousemove)
			   .on("click", change);
			 
			function change(){
				var data2 = dataset;
				var doma1 = dom;
				var mouseX1 = d3.mouse(this)[0] - padding.left;
            	var mouseY1 = d3.mouse(this)[1] - padding.top;
            	var x00 = xScale.invert(mouseX1);
            	var y00 = mouseY1;
            	var y000 = yAxisWidth/doma1.length
            	var y010 = Math.floor(y00/y000), y020 = doma1[doma1.length-y010-1];
            	x00 = Math.floor(x00);
            	var RS_set11 = $("#datepicker2").val()
				RS_set11 = parseInt(RS_set11.substring(8, RS_set11.length))
            	console.log(y020, x00, RS_set11)
            	y020 = parseInt(y020.substring(1, y020.length))
            	let data = {"x":y020, "y":x00, 'z': RS_set11}
				let jsondata = JSON.stringify(data)
				$.ajax({
				  	type: 'post',
				  	data: jsondata,
				  	url: "http://127.0.0.1:8000/admin/post_view2.0_8/",
				  	success: function(result){
				 		var sf = result.data;
				 		draw_children(sf, y020, x00);
			  		},
			  				dataType: 'JSON',
					});
			}
			
			function draw_children(A, B, C){
				d3.selectAll(".rect1").remove();
				d3.select(".gx").remove();
				d3.select(".gy").remove();
				d3.select(".focusLine").remove();
				d3.select(".tooltip").remove();
				d3.select(".overlay").remove();
				d3.selectAll(".rect1").remove();
				d3.selectAll(".line1").remove();
				d3.selectAll(".line2").remove();
				d3.selectAll(".text1").remove();
				d3.select(".goback").remove();
				d3.select(".divshow").remove();
				C = C + 1;
				
				var max_speed1 = d3.max(A[1]), min_speed1 = d3.min(A[1])
				var linear2 = d3.scaleLinear()  
				           .domain([max_speed1, min_speed1])  
				           .range([0,1]);
				var yScale = d3.scaleBand()
				               .domain(["10m", "20m", "30m", "40m", "50m", "60m"])
				               .range([yAxisWidth, 0])
				               .padding(0.2);
				               
				var yAxis = d3.axisLeft(yScale)
						  .ticks(6);
						  
				var xScale = d3.scaleLinear()
			               .domain([0, d3.max(A[0])])
			               .range([0, xAxisWidth])
			               
				var xAxis = d3.axisBottom(xScale)
				
				var gY = svg.append("g")
				            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
				            .attr("class", "gy")
				gY.call(yAxis);
				var gX = svg.append("g")
			            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
			            .attr("class","gx")
				gX.call(xAxis);
				
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", padding.left-10)
							   .attr("y", padding.top-5)
							   .text("Min")
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", wi-padding.right-30)
							   .attr("y", he-padding.bottom-5)
							   .text("Flow")
				
				var rectHeight = yScale.step()

				var min = d3.min(A[0]), max = d3.max(A[0]);
				var dscale = d3.scaleLinear()
				               .domain([0,max])
				               .range([0, xAxisWidth-50])
				var g = svg.append("g");
				var rect1 = g.selectAll("rect")
							  .data(A[0])
							  .enter()
							  .append("rect")
							  .attr("fill", function(d,i){
							  	return colorNew(linear2(A[1][i]))
							  })
							  .attr("y", function(d, i){return he-padding.bottom-rectHeight})
							  .attr("x", padding.left + 0.5)
							  .attr("height", 25)
							  .attr("width", function(d,i){return 1})
							  .attr("class", "rect1")
							  .on("mouseover", function(d, i){
							  	flowdiv.html("<strong>"+d+"</strong>");
							  	speeddiv.html("<strong>"+A[1][i]+"</strong>");
							  	d3.select(this).style("cursor", "pointer")
							  })
				recthaha();
				var rectTran1 = rect1.transition()
		                   .delay(function(d,i){return i*25})
		                   .duration(1000)
		                   .attr("y", function(d,i){
						  	return he-padding.bottom-rectHeight*(i+1)
						  })
		                   .attr("width", function(d,i){return dscale(d)})
		        var divshow = "<div class = 'divshow'></div>";
		        var goback = "<div class = 'goback'></div>";
				$("#buju2").append(divshow)
				$("#buju2").append(goback)
				d3.select(".goback").style("cursor", "pointer")
				d3.select(".goback").append("i")
									.attr("class", "fa fa-share fa-stack-2x")
									.style("margin-top", "3px")
				var title1 = d3.select(".divshow").append("div")
												  .attr("class", "title1")
				title1.html("<strong>R"+B+"("+ C +"H)</strong>")
				var flowdiv = d3.select(".divshow").append("div")
												  .attr("class", "flowdiv")
				var speeddiv = d3.select(".divshow").append("div")
												  .attr("class", "speeddiv")
												  
				$(".goback").on("click", function(){
					d3.select(".goback").remove();
					d3.select(".divshow").remove();
					d3.select('.'+A_last).attr("stroke", "yellow")
									   .attr("stroke-opacity", '1')
									   .attr("stroke-width", '10')
					var rectTran2 = rect1.transition()
		                   .delay(function(d,i){return i*25})
		                   .duration(1000)
		                   .attr("y", function(d, i){return he-padding.bottom-rectHeight})
		                   .attr("width", function(d,i){return 1})
		                   .remove()
					draw_flow_speed();
				})
		                   
		        
			}
			
			function mousemove(){
				var h1 = $("#map").height(), h2 = $("#gongjulan").height(), h3 = H_tool;
				var data1 = dataset;
				var doma = dom;
				var mouseX = d3.mouse(this)[0] - padding.left;
            	var mouseY = d3.mouse(this)[1] - padding.top;
            	var x0 = xScale.invert( mouseX );
            	var y0 = mouseY;
            	var y00 = yAxisWidth/doma.length
            	var y01 = Math.floor(y0/y00), y02 = doma[doma.length-y01-1];
            	x0 = Math.floor(x0);
            	hightlight(y02);
//          	console.log(y02, x0)
            	var x1;
            	if(x0<9){x1 = "0"+(x0);}else{x1 = x0};
            	var data = [];
            	for(var i = 0; i<parseInt((data1.length)/24); i++){
            		data.push(i*24+x0)
            	}
            	title.html("<strong>Speed("+ x1 +"H)</strong>")
            	var hahaha = d3.selectAll(".des_body .des")
            	for(var pp = 0; pp < hahaha.size(); ++pp){
            		if(pp == y01){
            			let scoTop = d3.select(hahaha._groups[0][pp])._groups[0][0].offsetTop;
            			d3.select(hahaha._groups[0][pp]).style("background", "#D3D3D3")
            			$(".des_body").scrollTop(scoTop);
            		}else{
            			d3.select(hahaha._groups[0][pp]).style("background", "#FFFFFF")
            		}
            	}
            	desText.html(function(d,i){
            		var x11;
            		if(flow[x0][i].value < 10){
            			x11 = "00"+flow[x0][i].value 
            		}else if(flow[x0][i].value < 100){
            			x11 = "0"+flow[x0][i].value
            		}else{
            			x11 = flow[x0][i].value
            		}
//          		return flow[x0][i].roadname + "　" + "<strong>"+ x11 +"(F)</strong>"+ "　" + "<strong>"+ flow[x0][i].speed +"(S)</strong>"
					return "<strong>"+flow[x0][i].roadname+"</strong>"+ "　" + "<strong>"+ flow[x0][i].speed +"(km/h)</strong>"
            	});
            	var top_d, left_d;
            	if((d3.event.pageY-h1+$(".tooltip").height()) >= $("#buju2").height()-5){
            		top_d = $("#buju2").height()-$(".tooltip").height()-15;
            	}else{
            		top_d = d3.event.pageY-h1;
            	}
            	if(d3.event.pageX >= 1330){
            		left_d = d3.event.pageX-380-$(".tooltip").width();
            	}else{
            		left_d = d3.event.pageX-330;
            	}
//          	console.log(d3.event.pageX, $(".tooltip").width(), left_d)
            	tooltip.style("left", left_d + "px")
            	       .style("top", (top_d-10) + "px");
            	       
            	var vlx = xScale(x0+0.5) + padding.left;
            	
            	vLine.attr("x1", vlx)
            	     .attr("y1", padding.top)
            	     .attr("x2", vlx)
            	     .attr("y2", he-padding.bottom+2);
			};
			function hightlight(A){
				A = A.substring(1,A.length);
				A = 'road'+(parseInt(A)-1)
				if(A_last == A){
					d3.select('.'+A).attr("stroke", "black")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '15')
				}else{
					d3.select('.'+A).attr("stroke", "black")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '15')
					d3.select('.'+A_last).attr("stroke", "yellow")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '10')
				}
				
				A_last = A;
			}
			function recthaha(){
				var colorDiv = d3.select("#buju2").append("div")
						                 .attr("class", "colorDiv")
						                 .style('background', "linear-gradient(to bottom, #1a9850, #66bd63, #a6d96a, #d9ef8b, #ffffbf, #fee08b, #fdae61, #f46d43, #d73027, #a50026)")
				let x1, x2;
				if(max_speed>=10&&max_speed<100){
					x1 = 521;
				}else if(max_speed>=100){
					x1 = 519
				}else{
					x1 = 523;
				};
				if(min_speed>=10&&max_speed<100){
					x2 = 521;
				}else if(min_speed>=100){
					x2 = 519
				}else{
					x2 = 523;
				};
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", "#1a9850")
							   .attr("x", x1)
							   .attr("y", 91)
							   .text(max_speed)
							   
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", "#a50026")
							   .attr("x", x2)
							   .attr("y", 233)
							   .text(min_speed)
							   
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("x", 511)
							   .attr("y", 253)
							   .text("Km/h")
				}
		};
		
		function drawrect1(dataset,dom, data_speed, svg){
			
			d3.select(".gx1").remove();
			d3.select(".gy1").remove();
			d3.select(".overlay1").remove();
			d3.select(".tooltip1").remove();
			d3.selectAll(".rect2").remove();
			d3.selectAll(".line2").remove();
			d3.selectAll(".line3").remove();
			d3.selectAll(".text2").remove();
			d3.select(".goback2").remove();
			d3.select(".divshow2").remove();
			d3.select(".colorDiv1").remove();
			var max_speed = d3.max(data_speed), min_speed = d3.min(data_speed);
			var min_flow = d3.min(dataset), max_flow = d3.max(dataset);
			var linear1 = d3.scaleLinear()  
				           .domain([max_flow, min_flow])  
				           .range([0,1]);
				           
			var colorFlow = d3.scaleQuantize()
						  .domain([0, 1])
						  .range(["#002766", "#003A8C", "#0050B3", "#096DD9", "#1890FF", "#40A9FF", "#69C0FF", "#91D5FF", "#BAE7FF"]);
			
			var yScale = d3.scaleBand()
			               .domain(dom)
			               .range([yAxisWidth, 0])
			               
//			var yAxis = d3.axisLeft(yScale)
//					  .ticks(12);
					  
			var xScale = d3.scaleLinear()
		               .domain([0, 24])
		               .range([0, xAxisWidth])
		               
			var xAxis = d3.axisBottom(xScale)
			              .ticks(13)
			
			var gY = svg.append("g")
			            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
			            .attr("class", "gy1")
//			gY.call(yAxis);
			var gX = svg.append("g")
		            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
		            .attr("class","gx1")
			gX.call(xAxis);
			
			var rectHeight = yScale.step(), rectWidth = xScale(1) - xScale(0); //矩形高度
			
			function draw_segline(don, H, svg){
				var base_y = padding.top+0.5;
				for(var i = 0; i<don.length; i++){
					var line = svg.append("line")
								  .attr("x1", padding.left)
								  .attr("y1", base_y+ i*H)
								  .attr("x2", xAxisWidth+padding.left)
								  .attr("y2", base_y+ i*H)
								  .attr("stroke", "gray")
								  .attr("class", "line2")
				};
			};
			draw_segline(dom, rectHeight, svg);
			
			
			var g = svg.append("g");
			var rect = g.selectAll(".rect2")
						  .data(dataset)
						  .enter()
						  .append("rect")
						  .attr("fill", function(d,i){
						  	if(d==0){
						  		return "black"
						  	}else{
						  		return colorFlow(linear1(d))
						  	}
						  })
						  .attr("x", function(d,j){
						  		return padding.left+0.5 
						  })
						  .attr("y", function(d, i){return padding.top+0.5 + rectHeight * (dom.length-1) })
						  .attr("height", rectHeight)
//						  .attr("width", function(d){
//						  	return dscale(d)
//						  })
						  .attr("width", rectWidth)
						  .attr("class", "rect2");
						  
			var rectTran = rect.transition()
		                   .delay(function(d,i){return i*10})
		                   .duration(200)
		                   .attr("y", function(d,i){
						  	return (padding.top+0.5 + rectHeight * (dom.length-1)) - parseInt(i/24)*rectHeight
						  })
		                   .attr("x", function(d,j){
						  		return padding.left+0.5 + (j%24)*rectWidth
						  })

			recthaha();
						   
	        /***********************************************显示信息更友善***********************************************/
	       	var flow = [];
	       	for(var i = 0; i<24; i++){
	       		flow[i] = [];
	       		for(var j = dom.length-1; j >= 0; j--){
		       		flow[i].push({roadname: dom[j],
	            		       value:dataset[24*j+i],
	            		       speed:data_speed[24*j+i]
	            		     })
	       		};
	       	};
			var tooltip1 = d3.select("#buju2")
                            .append("div")
                            .attr("class","tooltip1")
                            .style("opacity",0);
            var title = tooltip1.append("div")
                               .attr("class", "title1");
            var des_body1 = tooltip1.append("div")
                               .attr("class", "des_body1");
            var des1 = des_body1.selectAll(".des1")
                              .data(dom)
                              .enter()
                              .append("div")
                              .attr("class", "des1");
            var desText = des1.append("div")
                              .attr("class", "desText1");
            
            var vLine = svg.append("line")
                           .attr("class", "focusLine1")
                           .attr("stroke","black")
                           .attr("stroke-dasharray",5.5)//设置虚线
                           .style("display", "none");
            var H_tool = (dom.length+1)*30 + 9;
            var A_last;
          
			svg.append("rect")
			   .attr("class", "overlay1")
			   .attr("x", padding.left)
			   .attr("y", padding.top)
			   .attr("width", xAxisWidth)
			   .attr("height", yAxisWidth)
			   .on("mouseover", function(){
			   	  tooltip1.attr("height", H_tool)
			   	         .style("opacity", 1.0);
			   	   vLine.style("display", null);
			   })
			   .on("mouseout", function(){
			   	  tooltip1.style("opacity", 0.0);
			   	  vLine.style("display", "none");
			   	  d3.select('.'+A_last).attr("stroke", "yellow")
									   .attr("stroke-opacity", '1')
									   .attr("stroke-width", '10')
			   	  
			   })
			   .on("mousemove", mousemove)
			   .on("click", change);
			 
			function change(){
				var data2 = dataset;
				var doma1 = dom;
				var mouseX1 = d3.mouse(this)[0] - padding.left;
            	var mouseY1 = d3.mouse(this)[1] - padding.top;
            	var x00 = xScale.invert(mouseX1);
            	var y00 = mouseY1;
            	var y000 = yAxisWidth/doma1.length
            	var y010 = Math.floor(y00/y000), y020 = doma1[doma1.length-y010-1];
            	x00 = Math.floor(x00);
            	var RS_set11 = $("#datepicker2").val()
				RS_set11 = parseInt(RS_set11.substring(8, RS_set11.length))
            	console.log(y020, x00, RS_set11)
            	y020 = parseInt(y020.substring(1, y020.length))
            	let data = {"x":y020, "y":x00, 'z': RS_set11}
				let jsondata = JSON.stringify(data)
				$.ajax({
				  	type: 'post',
				  	data: jsondata,
				  	url: "http://127.0.0.1:8000/admin/post_view2.0_8/",
				  	success: function(result){
				 		var sf = result.data;
				 		draw_children(sf, y020, x00);
			  		},
			  				dataType: 'JSON',
					});
			}
			
			function draw_children(A, B, C){
				
				d3.selectAll(".rect2").remove();
				d3.select(".gx").remove();
				d3.select(".gy").remove();
				d3.select(".focusLine").remove();
				d3.select(".tooltip1").remove();
				d3.select(".overlay").remove();
				d3.selectAll(".line1").remove();
				d3.selectAll(".line2").remove();
				d3.selectAll(".text1").remove();
				d3.select(".goback").remove();
				d3.select(".divshow").remove();
				C = C + 1;
				
				var max_speed1 = d3.max(A[1]), min_speed1 = d3.min(A[1])
				var linear2 = d3.scaleLinear()  
				           .domain([max_speed1, min_speed1])  
				           .range([0,1]);
				var yScale = d3.scaleBand()
				               .domain(["10m", "20m", "30m", "40m", "50m", "60m"])
				               .range([yAxisWidth, 0])
				               .padding(0.2);
				               
				var yAxis = d3.axisLeft(yScale)
						  .ticks(6);
						  
				var xScale = d3.scaleLinear()
			               .domain([0, d3.max(A[0])])
			               .range([0, xAxisWidth])
			               
				var xAxis = d3.axisBottom(xScale)
				
				var gY = svg.append("g")
				            .attr("transform","translate("+padding.left+","+(he-yAxisWidth-padding.bottom)+")")
				            .attr("class", "gy")
				gY.call(yAxis);
				var gX = svg.append("g")
			            .attr("transform","translate("+padding.left+","+(he-padding.bottom)+")")
			            .attr("class","gx")
				gX.call(xAxis);
				
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", padding.left-10)
							   .attr("y", padding.top-5)
							   .text("Min")
				var text1 = svg.append("text")
							   .attr("class", "text1")
							   .attr("fill", c1)
							   .attr("x", wi-padding.right-30)
							   .attr("y", he-padding.bottom-5)
							   .text("Flow")
				
				var rectHeight = yScale.step()

				var min = d3.min(A[0]), max = d3.max(A[0]);
				var dscale = d3.scaleLinear()
				               .domain([0,max])
				               .range([0, xAxisWidth-50])
				var g = svg.append("g");
				var rect1 = g.selectAll("rect")
							  .data(A[0])
							  .enter()
							  .append("rect")
							  .attr("fill", function(d,i){
							  	return colorNew(linear2(A[1][i]))
							  })
							  .attr("y", function(d, i){return he-padding.bottom-rectHeight})
							  .attr("x", padding.left + 0.5)
							  .attr("height", 25)
							  .attr("width", function(d,i){return 1})
							  .attr("class", "rect1")
							  .on("mouseover", function(d, i){
							  	flowdiv.html("<strong>"+d+"</strong>");
							  	speeddiv.html("<strong>"+A[1][i]+"</strong>");
							  	d3.select(this).style("cursor", "pointer")
							  })
				recthaha();
				var rectTran1 = rect1.transition()
		                   .delay(function(d,i){return i*25})
		                   .duration(1000)
		                   .attr("y", function(d,i){
						  	return he-padding.bottom-rectHeight*(i+1)
						  })
		                   .attr("width", function(d,i){return dscale(d)})
		        var divshow = "<div class = 'divshow'></div>";
		        var goback = "<div class = 'goback'></div>";
				$("#buju2").append(divshow)
				$("#buju2").append(goback)
				d3.select(".goback").style("cursor", "pointer")
				d3.select(".goback").append("i")
									.attr("class", "fa fa-share fa-stack-2x")
									.style("margin-top", "3px")
				var title1 = d3.select(".divshow").append("div")
												  .attr("class", "title1")
				title1.html("<strong>R"+B+"("+ C +"H)</strong>")
				var flowdiv = d3.select(".divshow").append("div")
												  .attr("class", "flowdiv")
				var speeddiv = d3.select(".divshow").append("div")
												  .attr("class", "speeddiv")
												  
				$(".goback").on("click", function(){
					d3.select(".goback").remove();
					d3.select(".divshow").remove();
					d3.select('.'+A_last).attr("stroke", "yellow")
									   .attr("stroke-opacity", '1')
									   .attr("stroke-width", '10')
					var rectTran2 = rect1.transition()
		                   .delay(function(d,i){return i*25})
		                   .duration(1000)
		                   .attr("y", function(d, i){return he-padding.bottom-rectHeight})
		                   .attr("width", function(d,i){return 1})
		                   .remove()
					draw_flow_speed();
				})
		                   
		        
			}
			
			function mousemove(){
				var h1 = $("#map").height(), h2 = $("#gongjulan").height(), h3 = H_tool;
				var data1 = dataset;
				var doma = dom;
				var mouseX = d3.mouse(this)[0] - padding.left;
            	var mouseY = d3.mouse(this)[1] - padding.top;
            	var x0 = xScale.invert( mouseX );
            	var y0 = mouseY;
            	var y00 = yAxisWidth/doma.length
            	var y01 = Math.floor(y0/y00), y02 = doma[doma.length-y01-1];
            	x0 = Math.floor(x0);
            	hightlight(y02);
//          	console.log(y02, x0)
            	var x1;
            	if(x0<9){x1 = "0"+(x0);}else{x1 = x0};
            	var data = [];
            	for(var i = 0; i<parseInt((data1.length)/24); i++){
            		data.push(i*24+x0)
            	}
            	title.html("<strong>Flow("+ x1 +"H)</strong>")
            	var hahaha = d3.selectAll(".des_body1 .des1")
            	for(var pp = 0; pp < hahaha.size(); ++pp){
            		if(pp == y01){
            			let scoTop = d3.select(hahaha._groups[0][pp])._groups[0][0].offsetTop;
            			d3.select(hahaha._groups[0][pp]).style("background", "#D3D3D3")
            			$(".des_body1").scrollTop(scoTop);
            		}else{
            			d3.select(hahaha._groups[0][pp]).style("background", "#FFFFFF")
            		}
            	}
            	desText.html(function(d,i){
            		var x11;
            		if(flow[x0][i].value < 10){
            			x11 = "00"+flow[x0][i].value 
            		}else if(flow[x0][i].value < 100){
            			x11 = "0"+flow[x0][i].value
            		}else{
            			x11 = flow[x0][i].value
            		}
//          		return flow[x0][i].roadname + "　" + "<strong>"+ x11 +"(F)</strong>"+ "　" + "<strong>"+ flow[x0][i].speed +"(S)</strong>"
					return "<strong>"+flow[x0][i].roadname+"</strong>"+ "　" + "<strong>"+ x11 +"</strong>"
            	});
            	var top_d, left_d;
            	if((d3.event.pageY-h1+$(".tooltip1").height()) >= $("#buju2").height()-5){
            		top_d = $("#buju2").height()-$(".tooltip1").height()-15;
            	}else{
            		top_d = d3.event.pageY-h1;
            	}
            	if(d3.event.pageX >= 1330){
            		left_d = d3.event.pageX-380-$(".tooltip1").width();
            	}else{
            		left_d = d3.event.pageX-330;
            	}
//          	console.log(d3.event.pageX, $(".tooltip").width(), left_d)
            	tooltip1.style("left", left_d + "px")
            	       .style("top", (top_d-10) + "px");
            	       
            	var vlx = xScale(x0+0.5) + padding.left;
            	
            	vLine.attr("x1", vlx)
            	     .attr("y1", padding.top)
            	     .attr("x2", vlx)
            	     .attr("y2", he-padding.bottom+2);
			};
			function hightlight(A){
				A = A.substring(1,A.length);
				A = 'road'+(parseInt(A)-1)
				if(A_last == A){
					d3.select('.'+A).attr("stroke", "black")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '15')
				}else{
					d3.select('.'+A).attr("stroke", "black")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '15')
					d3.select('.'+A_last).attr("stroke", "yellow")
									.attr("stroke-opacity", '1')
									.attr("stroke-width", '10')
				}
				
				A_last = A;
			}
			function recthaha(){
				var colorDiv = d3.select("#buju2").append("div")
						                 .attr("class", "colorDiv1")
						                 .style('background', "linear-gradient(to bottom, #002766, #003A8C, #0050B3, #096DD9, #1890FF, #40A9FF, #69C0FF, #91D5FF, #BAE7FF)")
				let x1, x2;
				if(max_flow>=10&&max_flow<100){
					x1 = 520;
				}else if(max_flow=100){
					x1 = 518
				}else{
					x1 = 523;
				};
				if(min_flow>=10&&max_flow<100){
					x2 = 520;
				}else if(min_flow>=100){
					x2 = 518;
				}else{
					x2 = 523;
				};
				var text1 = svg.append("text")
							   .attr("class", "text2")
							   .attr("fill", "#002766")
							   .attr("x", x1)
							   .attr("y", 91)
							   .text(max_flow)
							   
				var text1 = svg.append("text")
							   .attr("class", "text2")
							   .attr("fill", "#BAE7FF")
							   .attr("x", x2)
							   .attr("y", 233)
							   .text(min_flow)
							   
				var text1 = svg.append("text")
							   .attr("class", "text2")
							   .attr("x", 510)
							   .attr("y", 253)
							   .text("Car/h")
				}
		};
		
//*******************************************画方块**************************************************//
//*******************************************热力图**************************************************//
		$(".prediction").on("click", function(){
//				let data = {"x":"0101", "y":330, "z":80}
				clear1();
				clear2();
				clear3();
				clear4();
				clear5();
				clear6();
				let s1 = $("#datepicker4").val(), s2 = $("#va6").val()
				s1 = parseInt(s1.substring(8, s1.length));
				var s21 = parseInt(s2.substring(0,2)), s22 = parseInt(s2.substring(3,5));
				s2 = s21 * 60 + s22;
				var adf, adf1, zzzzz, yyyyy, zzzzz_set = [], yyyyy_set = [], zzzzz_set1 = [], yyyyy_set1 = [], zzzzz_set2 = [], zzzzz_set_last = [], yyyyy_set2 = [], yyyyy_set_last = [], datadetial = [];
				if((s22-10)<0){
					adf = 50 + s12
					$('.l4').text(adf);
					adf1 = s21-1
					if(adf1<10){
						$('.l3').text("0"+adf1);
					}else{
						$('.l3').text(adf1);
					}
				}else{
						adf = s22-10
						if(adf<10){
							$('.l4').text("0"+adf);
						}else{
							$('.l4').text(adf);
						}
						adf1 = s21
						if(adf1<10){
							$('.l3').text("0"+adf1);
						}else{
							$('.l3').text(adf1);
						}
				}
				if((s22-20)<0){
					adf = 40 + s12
					$('.l2').text(adf);
					adf1 = s21-1
					if(adf1<10){
						$('.l1').text("0"+adf1);
					}else{
						$('.l1').text(adf1);
					}
				}else{
					adf = s22-20
					if(adf<10){
						$('.l2').text("0"+adf);
					}else{
						$('.l2').text(adf);
					}
					adf1 = s21
					if(adf1<10){
						$('.l1').text("0"+adf1);
					}else{
						$('.l1').text(adf1);
					}
				}
				if(s21<10){
					$('.l5').text("0"+s21);
				}else{
					$('.l5').text(s21);
				}
				if(s22<10){
					$('.l6').text("0"+s22);
				}else{
					$('.l6').text(s22);
				}
				var data = {"x":s1, "y":s2}
				var jsondata = JSON.stringify(data)
					$.ajax({
						type: 'post',
						data: jsondata,
//						url: "http://127.0.0.1:8000/admin/post_view2.0_2/",
						url: "http://127.0.0.1:8000/admin/new_1/",
						success: function(result){
//						 drawheatmap(result.data);
						console.log(result.data)
						 zzzzz = result.data[0][0];
						 yyyyy = result.data[1][0];
						 xxxxx1 = result.data[2][0]
						 xxxxx2 = result.data[2][1]
						 xxxxx3 = result.data[2][2]
						 $("#se2").change(function(){
						 	let hh = $(this).val();
						 	hh = parseInt(hh.substring(4,hh.length))
						 	console.log(zzzzz)
						 	$('.f1').text(zzzzz[hh-1]);
							$('.f2').text(zzzzz[677+hh]);
							$('.f3').text(zzzzz[1355+hh]);
						 })
//						 console.log(RS_list)
						 for(var i = 0; i<zzzzz.length; i++){
						 	if((i/678)<1){
						 		zzzzz_set.push(zzzzz[i]);
						 		yyyyy_set.push(yyyyy[i]);
						 	}else if((i/1356)<1){
						 		zzzzz_set1.push(zzzzz[i])
						 		yyyyy_set1.push(yyyyy[i])
						 	}else{
						 		zzzzz_set2.push(zzzzz[i])
						 		yyyyy_set2.push(yyyyy[i])
						 	}
						 }
						 zzzzz_set_last.push(zzzzz_set);
						 zzzzz_set_last.push(zzzzz_set1);
						 zzzzz_set_last.push(zzzzz_set2);
						 yyyyy_set_last.push(yyyyy_set);
						 yyyyy_set_last.push(yyyyy_set1);
						 yyyyy_set_last.push(yyyyy_set2);
						 
						 for(var p = 0; p<zzzzz_set_last[0].length; p++){
						 	datadetial.push({"roadname":"Road"+(p+1),
						 	                 "pred_flow_now":zzzzz_set_last[2][p], "pred_flow_20":zzzzz_set_last[1][p], "pred_flow_10":zzzzz_set_last[0][p],
						 					 "real_flow_now":yyyyy_set_last[2][p], "real_flow_20":yyyyy_set_last[1][p], "real_flow_10":yyyyy_set_last[0][p]
						 				})
						 }
						 
						draw_road_fist1(zzzzz_set_last[2], RS_list)
						drawPiechart(xxxxx3)
						$(".ol3").css("background-color", "#F2701D")
						$(".p1").css("background-color", "#F2701D")
						var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12")
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						 								   
						$(".ten").on("click", function(){
						 	draw_road_fist1(zzzzz_set_last[0], RS_list)
						 	drawPiechart(xxxxx1)
						 	$(".ol1").css("background-color", "#F2701D")
						 	$(".ol2").css("background-color", "white")
						 	$(".ol3").css("background-color", "white")
						 	var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12")
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						})
						$(".twen").on("click", function(){
						 	draw_road_fist1(zzzzz_set_last[1], RS_list)
						 	drawPiechart(xxxxx2)
						 	$(".ol1").css("background-color", "white")
						 	$(".ol2").css("background-color", "#F2701D")
						 	$(".ol3").css("background-color", "white")
						 	var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12");
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						})
						$(".now").on("click", function(){
						 	draw_road_fist1(zzzzz_set_last[2], RS_list)
						 	drawPiechart(xxxxx3)
						 	$(".ol1").css("background-color", "white")
						 	$(".ol2").css("background-color", "white")
						 	$(".ol3").css("background-color", "#F2701D")
						 	var dat111 = d3.selectAll(".roadp").data(datadetial)
						 			   .on("mouseover", function(d){
						 			   		d3.select(this).attr("stroke-width", "12");
											$(".roadP").text(d.roadname);
											$(".f1").text(d.pred_flow_10)
											$(".f2").text(d.real_flow_20)
											$(".f3").text(d.pred_flow_now)
										})
						 			   .on("mouseout", function(){
						 			   		d3.select(this).attr("stroke-width", "6")
						 			   })
						})
						 
					  	},
					  	dataType: 'JSON',
					});
		})
		
		function draw_road_fist1(A, B){
			d3.selectAll(".roadp").remove();
			var compute = d3.interpolate(c2,c1); 
			var linear = d3.scaleLinear()  
				           .domain([0,d3.max(A)])  
				           .range([0,1]);
  			var res_carflow = A
			var dt = B;
			for(var j = 0; j<dt.length; j++){
			  		if(dt[j].length == 4){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'roadp'})
			  					    .addTo(map);
			  		}else if(dt[j].length == 3){
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'roadp'})
			  						.addTo(map);
			  		}else{
			  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: compute(linear(res_carflow[j])), opacity: 1, weight: 6, className: 'roadp'})
			  						.addTo(map);
			  				}
			  			}
  		}
		
		function clear4(){
			d3.selectAll(".roadp").remove();
			$(".ol1").css("background-color", "white")
			$(".ol2").css("background-color", "white")
			$(".ol3").css("background-color", "white")
			$(".p1").css("background-color", "white")
			$(".p4").css("background-color", "white")
			$(".p7").css("background-color", "white")
			for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
		}
//*******************************************************饼状图显示预测与真实值之间的差距*******************************************************************************************************************************************************************************************************************************//
		var dataLine = [0.2, 0.4, 0.2, 0.08, 0.12]
		var colorSet = ["#032914", "#107535", "#2FC25B", "#7BDB91", "#D7F5DC"]
		var colordashbored = d3.scaleOrdinal(d3.schemeCategory10);
		
		var wi1 = 405, he1 = 320, padding1 = {top:40, bottom:40, left:50, right:20} 
		var xax = wi1-padding1.left-padding1.right;
	    var yax = he1-padding1.top-padding1.bottom;
	    var xSca = d3.scaleBand()
	                 .domain(["Zero", "One", "Two", "Three", "other"])//定义域何值域必须带上[]******
	                 .range([0,xax]);
	    var ySca = d3.scaleLinear()
	                 .domain([0, 0.5])
	                 .range([yax,0]);
		
		function drawLinechartAxis(){
			var svg1 = d3.select("#buju4").append("svg")
						 .attr("width", wi1)
						 .attr("height", he1)
					 	 .attr("class", "svg2")
		              
		    var xAxisL = d3.axisBottom(xSca)
		              
			var yAxisL = d3.axisLeft(ySca)
						   .ticks(5)
						   .tickFormat(d3.format(".0%"))
			
			var gXL = svg1.append("g")
			            .attr("transform","translate("+padding1.left+","+(he1-padding1.bottom)+")")
			            .attr("class","gxL")
			            .call(xAxisL)
			
			var gYL = svg1.append("g")
			            .attr("transform","translate("+padding1.left+","+(he1-yax-padding1.bottom)+")")
			            .attr("class", "gyL")
			            .call(yAxisL);

			
			function draweLine(){
				for(var i = 0; i<5; i++){
					var lineL = d3.select(".svg2").append("line")
												 .attr("x1", "50")
												 .attr("y1", ySca(0.1*(i+1))+padding1.top)
												 .attr("x2", wi1-20)
												 .attr("y2", ySca(0.1*(i+1))+padding1.top)
												 .attr("stroke", "gray")
												 .attr("class", "lineL")
												 .attr("stroke-dasharray",6)
				};
			}
			draweLine();
		}
		
		function linechartUpdata(data){
			var datapoint = [], linepoint = [];
			for(let k=1; k<6; k++){
				datapoint.push([
					padding1.left+ k*xSca.step()-xSca.step()/2,
					ySca(data[k-1])+padding1.top
				])
			}
//			console.log(datapoint)
			for(let j = 0 ; j<datapoint.length-1; j++){
				d3.select(".svg2").append("line")
								  .attr("x1", datapoint[j][0])
								  .attr("y1", datapoint[j][1])
								  .attr("x2", datapoint[j+1][0])
								  .attr("y2", datapoint[j+1][1])
								  .attr("stroke", "black")
								  .attr("stroke-width",2)
			}
			var starsymbol = d3.select(".svg2").selectAll(".starpath")
                    .data(datapoint)
                	.enter()
                	.append("path")
                	.attr("class", "starpath")
                	.attr("transform", function(d,i){
                			return "translate("+d[0]+","+d[1]+")"
                		})
				    .attr("d", d3.symbol().size(80))
				    .attr("fill", (d,i)=>colordashbored(i))
		}
		
			
		function drawPiechart(data){
			d3.selectAll(".text2").remove()
			d3.selectAll(".rect9").remove()
			d3.select(".svg2").remove()
			d3.select(".cheakbox").remove()
			
			var salesData=[
				{label:"Zero", color:"#D7F5DC", show: data.zero},
				{label:"One", color:"#7BDB91",  show: data.one},
				{label:"Two", color:"#2FC25B", show: data.two},
				{label:"Three", color:"#107535", show: data.three},
				{label:"Other", color:"#032914", show: data.other}
				];
			var wi1 = 415, he1 = 310, padding1 = {top: 40, right: 40, bottom: 30, left: 50};
			var svg1 = d3.select("#buju4").append("svg")
						 .attr("width", wi1)
						 .attr("height", he1)
					 	 .attr("class", "svg2")
			svg1.append("g").attr("id","salesDonut");
			function randomData(data){
				return salesData.map(function(d, i){ 
					return {label:d.label, value:data.pre[i], color:d.color, show: d.show};});
			} 
			Donut3D.draw("salesDonut", randomData(data), 210, 130, 130, 100, 30, 0.4);
			var gg = svg1.append("g");
			var rect2 = gg.selectAll("rect")
								 .data(salesData)
								 .enter()
								 .append("rect")
								 .attr("fill", function(d,i){
									 return d.color
								 })
								 .attr("y", he1 - 40)
								 .attr("x", function(d, i){return 55 + i*63})
								 .attr("height", 30)
								 .attr("width", 60)
								 .attr("rx", 5)
								 .attr("ry", 5)
								 .attr("class", "rect9")
								 .on("mouseover", function(d, i){
								 	d3.select(this).style("cursor", "pointer")
								 	d3.selectAll(".roadp").attr("stroke-opacity", "0")
								 	let dt = []
									for(let i = 0; i<RS.length; i++){
									  		dt.push(RS[i].R);
									  	}
									for(let j = 0; j<dt.length; j++){
									  		if(dt[j].length == 4){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  					    .addTo(map);
									  		}else if(dt[j].length == 3){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  						.addTo(map);
									  		}else{
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 0, weight: 6, className: 'road'+j})
									  						.addTo(map);
									  				}
									  			}
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "1")
								 		}
								 	}
								 })
								 .on("mouseout", function(d, i){
								 	for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
								 	d3.selectAll(".roadp").attr("stroke-opacity", "1")
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "0")
								 		}
								 	}
								 })
			var text2 = gg.selectAll("text")
						  .data(salesData)
						  .enter()
						  .append("text")
						  .attr("y", he1 - 35)
						  .attr("x", function(d, i){return 85 + i*63})
						  .attr("dy",15)
						  .attr("font-weight", 600)
						  .attr("fill", "white")
						  .attr("text-anchor","middle")
						  .attr("class", "text2")
						  .text(function(d){return d.label})
						  .on("mouseover", function(d, i){
								 	d3.select(this).style("cursor", "pointer")
								 	d3.selectAll(".roadp").attr("stroke-opacity", "0")
								 	let dt = []
									for(let i = 0; i<RS.length; i++){
									  		dt.push(RS[i].R);
									  	}
									for(let j = 0; j<dt.length; j++){
									  		if(dt[j].length == 4){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  					    .addTo(map);
									  		}else if(dt[j].length == 3){
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
									  						.addTo(map);
									  		}else{
									  			polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 0, weight: 6, className: 'road'+j})
									  						.addTo(map);
									  				}
									  			}
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "1")
								 		}
								 	}
								 })
								 .on("mouseout", function(d, i){
								 	for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
								 	d3.selectAll(".roadp").attr("stroke-opacity", "1")
								 	for(let i = 1; i<679; i++){
								 		if(d.show.indexOf(i) != -1){
								 			d3.select('.road'+ i).attr("stroke", d.color)
								 								 .attr("stroke-opacity", "0")
								 		}
								 	}
								 })
								 
			var cheakbox = d3.select("#buju4").append("input")
							                   .attr("class", "cheakbox")
							                   .attr("type", "checkbox")
							                   .on("mouseover", function(){
							                   		d3.select(this).style("cursor", "pointer")
							                   })
			$('.cheakbox').bind('click',function(){  
			    if($(this).is(':checked')){  
			           d3.selectAll(".roadp").attr("stroke-opacity", "0")
					   let dt = []
					   for(let i = 0; i<RS.length; i++){
					  		   dt.push(RS[i].R);
					  	   }
					   for(let j = 0; j<dt.length; j++){
					  		   if(dt[j].length == 4){
					  			   polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)], [parseFloat(dt[j][3].lat),parseFloat(dt[j][3].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
					  					       .addTo(map);
					  		   }else if(dt[j].length == 3){
					  			   polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)], [parseFloat(dt[j][2].lat),parseFloat(dt[j][2].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
					  						   .addTo(map);
					  		   }else{
					  			   polyline = L.polyline([[parseFloat(dt[j][0].lat),parseFloat(dt[j][0].lng)], [parseFloat(dt[j][1].lat),parseFloat(dt[j][1].lng)]], {color: 'red', opacity: 0, weight: 5, className: 'road'+j})
					  						   .addTo(map);
					  				   }
					  			   }
					   for(let i = 1; i<679; i++){
					   		for(let j = 0; j<salesData.length; j++){
					   			if(salesData[j].show.indexOf(i) != -1){
					 			d3.select('.road'+ i).attr("stroke", salesData[j].color)
					 								 .attr("stroke-opacity", "1")
					 		}
					   		}
					 	}
			           
			    }else{ 
			    	  for(let i = 0; i<678; i++ ){
										d3.select(".road"+i).remove();
									}
			          d3.selectAll(".roadp").attr("stroke-opacity", "1")
			    }
			    })

		}
		var data_show = {"one" :[1, 2, 3, 4, 5], "two":[6, 7, 8, 9, 10], "zero":[11, 13, 12, 14, 15], "three":[16, 17, 18, 19, 20], "other":[21, 22, 23, 24, 25], "pre":[200, 400, 200, 80, 120]}
        drawLinechartAxis();
		linechartUpdata(dataLine);
		$("#pieChart").on("click", function(){
			drawPiechart(data_show);
		})
		$("#lineChart").on("click", function(){
			d3.selectAll(".text2").remove()
			d3.selectAll(".rect9").remove()
			d3.select(".svg2").remove()
			d3.select(".cheakbox").remove()
			drawLinechartAxis();
			linechartUpdata(dataLine);
		})
//*******************************************************饼状图显示预测与真实值之间的差距*******************************************************************************************************************************************************************************************************************************//
		
		function drawheatmap(A){
			var datatt;
			var points = [];
			let tempp;
			let vall = A[A.length-1]
			let fff = d3.max(vall)
			for (var i = 0; i<A.length-1; i++){
				for (var j = 0; j<A[i].R.length-1; j++){
					if(vall[i]< fff/3){tempp = 20}else if(vall[i]< (2*fff)/3){tempp = 13}else{tempp = 7}
					createdata(tempp, 0.0010, A[i].R[j], A[i].R[j+1], vall[i])
				}
			}
//			console.log(datatt)
			datatt = {'max': fff, 'data':points}
			console.log(datatt)
			var heatmap_layer = new HeatmapOverlay(heatmap_cfg).addTo(map);
			heatmap_layer.setData(datatt);
			
			
			function createdata(number, radius, A, B, C) {
				var len = number;
//				var points = [];
				var max = 0; //单点最大值
				var a = parseFloat(A.lat),
					b = parseFloat(B.lat),
					a1 = parseFloat(A.lng),
					b1 = parseFloat(B.lng);
				var min1 = d3.min([a, a1]),
					max1 = d3.max([a, a1]),
					min2 = d3.min([b, b1]),
					max2 = d3.max([b, b1])
				var x = d3.scaleLinear()
					.domain([0, 1])
					.range([a, b])
			
				var y = d3.scaleLinear()
					.domain([0, 1])
					.range([a1, b1])
				for (; number > 0; number--) {
					var Q = number / len;
					var val = number;
					max = Math.max(max, val);
					var point = {
						"lat": x(Q), //经度
						"lng": y(Q), //纬度
						"count": val, //数据量大小
						"radius": radius
					};
					points.push(point);
				}
//				return points
			};
		};
					
					
		
			 // #F2AF1A #74F21A rgb(242,196,26) rgb(103,242,26)
		const c5 = d3.rgb(255,121,0);    //红色  
		const c6 = d3.rgb(219,255,0);    //绿色 
		var flowMax = 30
		var flow_co = d3.interpolate(c5,c6); 
		var linear_flow = d3.scaleLinear()  
			           .domain([0,flowMax])  
			           .range([0,1]);
//		console.log(flow_co(linear_flow(10)))
	    var heatmap_cfg={
	        "radius":"radius",          //设置每一个热力点的半径
	        "maxOpacity":.5,           //设置最大的不透明度
	        "scaleRadius":true,         //设置热力点是否平滑过渡
	        "blur": 0.95,               //系数越高，渐变越平滑，默认是0.85,
	                                    //滤镜系数将应用于所有热点数据。
	        "useLocalExtrema": false,    //使用局部极值
	        "latField":"lat",           //纬度
	        "lngField":"lng",           //经度
	        "valueField":"value",       //热力点的值
	      "gradient": {   
//	      				"0.99": "rgba(255,0,0,1)",
//	//						"1": "rgba(252,185,126, 1)",
//	                      "0.7": "rgba(255,157,70,1)",
//	                      "0.6": "rgba(255,185,70,1)",
//	                      "0.4": "rgba(255,193,70,1)",
//	                      "0": "rgba(255,240,70,1)"
						  '.01': flow_co(linear_flow(flowMax * 0.01)),
				          '.5': flow_co(linear_flow(flowMax * 0.1)),
				          '.99': flow_co(linear_flow(flowMax * 0.99)),
//				          '.1': flow_co(linear_flow(flowMax * 0.1)),
//				          '.2': flow_co(linear_flow(flowMax * 0.2)),
//				          '.3': flow_co(linear_flow(flowMax * 0.3)),
//				           '.4': flow_co(linear_flow(flowMax * 0.4)),
//				          '.5': flow_co(linear_flow(flowMax * 0.5)),
//				          '.6': flow_co(linear_flow(flowMax * 0.6)),
//				          '.7': flow_co(linear_flow(flowMax * 0.7)),
//				          '.8': flow_co(linear_flow(flowMax * 0.8)),
//				          '.99': flow_co(linear_flow(flowMax * 0.99)),
	                  }
	    }
	    
	    var heatmap_layer = new HeatmapOverlay(heatmap_cfg);
//*******************************************热力图**************************************************//

		//布局js
		var colorList = d3.scaleOrdinal(d3.schemeCategory10)
		$("#setting_menu").on("click", function(){$("#setting_table").slideToggle(300, function(){
			
		})})
		var se_title_icon = false
		$("#se_title").on("click", function(){
			if(se_title_icon){
				$("#iconTT").removeClass("fa-bars").addClass("fa-close");
				se_title_icon = false;
			}else{
				$("#iconTT").removeClass("fa-close").addClass("fa-bars");
				se_title_icon = true;
			}
//			$("#MsgAccordion").slideToggle(300)
			$("#setting_table").slideToggle(300)
			})
		$(".flatpickr").flatpickr();
		$(".flatpickr1").flatpickr();
		$("#confirm").on("mousedown", function(){$(this).css("background", "white")})
					 .on("mouseup", function(){$(this).css("background", "#F8F8F8")})
		$(".but_road").on("mousedown", function(){$(this).css("color", "black")})
					 .on("mouseup", function(){$(this).css("color", "white")})
		$(".but_taxi").on("mousedown", function(){$(this).css("color", "black")})
					 .on("mouseup", function(){$(this).css("color", "white")})
		$("#cli_up").on("click", function(){$("#map_svg_tool").slideUp(300);$("#map_svg_tool_down").slideDown(300)})
		$("#map_svg_tool_down").on("click", function(){$("#map_svg_tool_down").slideUp(300); $("#map_svg_tool").slideDown(300)})
		
		$("#frame_up").on("click", function(){
			let frame_val = parseInt($("#theframe").val());
			$("#theframe").attr("value", frame_val+5)
		})
		$("#frame_down").on("click", function(){
			let frame_val = parseInt($("#theframe").val());
			if(frame_val == 0){
				$("#theframe").attr("value", 0)
			}else{
				$("#theframe").attr("value", frame_val-5)
			}
		})
		
		$(".yes").change(function() { 
		　　if($(this).is(':checked')) {
				$(".no").prop("checked", false)
				console.log("haha")
			} 
		});
		
		$(".no").change(function() { 
		　　if($(this).is(':checked')) {
				$(".yes").prop("checked", false)
			} 
		});
		
		$("#cli_pointer").on("click", function(){
			$("#select_menu").removeClass().addClass("fa fa-mouse-pointer fa-2x");
		})
		$("#cli_circle").on("click", function(){
			$("#select_menu").removeClass().addClass("fa fa-circle-o fa-2x");
		})
		$("#cli_square").on("click", function(){
			$("#select_menu").removeClass().addClass("fa fa-square-o fa-2x");
		})
		$("#cli_star").on("click", function(){
			$("#select_menu").removeClass().addClass("fa fa-star-o fa-2x");
		})
		
		$("#select_menu").hover(function(){
	    	$(".p_contain").addClass("p_contain1");
			},function(){
			    $(".p_contain").removeClass("p_contain1");
			});

		//选择颜色插件
		var color_set = [];
		$('.color-box').colpick({
			colorScheme:'dark',
			layout:'rgbhex',
			color:'ff8800',
			onSubmit:function(hsb,hex,rgb,el) {
				$(el).css('background', '#'+hex);
				$(el).colpickHide();
				color_set.push('#'+hex)
//				console.log("haha(to right, "+color_set+")")
				if(color_set.length == 1){
					$(".color-bar").css("background", color_set[0])
				}else{
					$(".color-bar").css("background", "linear-gradient(to right, "+color_set+")")
				}
			}
		})
		.css('background', "linear-gradient(to left,#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000)");
		
		$("#color_trash").on("click", function(){
			color_set = [];
			$(".color-bar").css("background", "white");
		})
		// 添加新的道路信息框
		
		data_road = [{'Name':'road1','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road2','V1':"hi",'V2':"ho",'V3':"hp"}, 
			{'Name':'road3','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road4','V1':"hi",'V2':"ho",'V3':"hp"}, 
			{'Name':'road5','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road6','V1':"hi",'V2':"ho",'V3':"hp"},
			{'Name':'road7','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road8','V1':"hi",'V2':"ho",'V3':"hp"},
			];
		data_road1 = [{'Name':'road1','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road2','V1':"hi",'V2':"ho",'V3':"hp"}, 
			{'Name':'road3','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road4','V1':"hi",'V2':"ho",'V3':"hp"}, 
			{'Name':'road5','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road6','V1':"hi",'V2':"ho",'V3':"hp"},
			{'Name':'road7','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road8','V1':"hi",'V2':"ho",'V3':"hp"},
			{'Name':'road8','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'road9','V1':"hi",'V2':"ho",'V3':"hp"},
			];
		data_taxi = [{'Name':'taxi1','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'taxi2','V1':"hi",'V2':"ho",'V3':"hp"}, 
			{'Name':'taxi3','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'taxi4','V1':"hi",'V2':"ho",'V3':"hp"}, 
			{'Name':'taxi5','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'taxi6','V1':"hi",'V2':"ho",'V3':"hp"},
			{'Name':'taxi7','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'taxi8','V1':"hi",'V2':"ho",'V3':"hp"},
			];
		
		function tianjiantable(A, B){
				$('#Msgtable' + String(B)).bootstrapTable({
				data: A,
			    showHeader : false,
			    showColumns : false,
			    showRefresh : false,
			    pagination: false,//分页
			    pageNumber : 1,
			    search: false,//显示搜索框
			    striped: true,
			    onClickRow: function (row, tr, field) {
			    		delect_d.push(row)
						$(tr).remove()
			    	},
			    //表格的列
			    columns: [
			        {
			            field: 'Name',//域值
			            title: 'Name',//标题
			            visible: true,//false表示不显示
			            sortable: true,//启用排序
			            width : '30%',
			        },
			        {
			            field: 'V1',//域值
			            title: 'V1',//标题
			            visible: true,//false表示不显示
			            sortable: true,//启用排序
			            width : '20%',
			            editable:true,
			        },
			        {
			            field: 'V2',//域值
			            title: 'V2',//标题
			            visible: true,//false表示不显示
			            sortable: true,//启用排序
			            width : '20%',
			            editable:true,
			        },
			        {
			            field: 'V3',//域值
			            title: 'V3',//标题
			            visible: true,//false表示不显示
			            sortable: true,//启用排序
			            width : '20%',
			            editable:true,
			        },
			    ]
			});
			$('td').css('padding','6px 4px 4px 8px');
			$('th').css('padding','6px 4px 6px 12px');
		}
		var delect_d = []
		var data_haha = [], table_count = 1;
//		tianjiantable(data_piu);
		
		var CollapseContainer = document.getElementById("MsgAccordion");
		var CollapseContainer1 = document.getElementById("MsgAccordion1");
		var divChildList = [];
		
		function NewCollapseDiv(color,title,collapseID,divcon){
			let newDiv = document.createElement("div");
			newDiv.style = "margin: 0px 0px 0px 1px"
			newDiv.className = "panel panel-default";
//			let newDivHeading = document.createElement("div");
//			newDivHeading.className = 'panel-heading'
//			newDivHeading.style = "padding: 4px 5px 4px 10px;background: " + color + ";"
//			newDivHeading.setAttribute('data-toggle','collapse')
//			newDivHeading.setAttribute('data-target',"#collapse" + String(collapseID))
//			let H4Div = document.createElement("h4");
//			H4Div.className = 'panel-title'
//			H4Div.style = "font-size: 12px;"
//			let titleDiv = document.createElement("b");
//			titleDiv.innerHTML = title
//			H4Div.appendChild(titleDiv)
//			newDivHeading.appendChild(H4Div)
			let bodyDiv = document.createElement("div");
			bodyDiv.id = "collapse" + String(collapseID)
			bodyDiv.className = 'panel-collapse collapse'
			bodyDiv.className = 'in'
			let msgDiv = document.createElement("div");
			msgDiv.className = 'panel-body'
			msgDiv.id = "MsgContainer" + String(collapseID)
			msgDiv.style = "padding: 2px 2px 2px 2px;box-shadow: 4px 4px 4px #e9e8e8;"
//			background: #F6F6F6;
			//内容只是例子
			msgDiv.innerHTML = '<table id="Msgtable' + String(collapseID) + '" style="font-size: 12px;"></table>'
			bodyDiv.appendChild(msgDiv)
//			newDiv.appendChild(newDivHeading)
			newDiv.appendChild(bodyDiv)
//			CollapseContainer.appendChild(newDiv)
			divcon.appendChild(newDiv)
			divChildList.push(newDiv)
		}
		
		var taxi_flag = false, flow_flag = false, exit_taxi_flag = true, exit_road_flag = true;
		$("#tab").on("click", function(){
			taxi_flag = true;
			if(exit_road_flag){
				NewCollapseDiv("#14CA82","Road",0,CollapseContainer);
				tianjiantable(data_road, 0);
				exit_road_flag = false;
			}
		})
		
		$("#tab1").on("click", function(){
			taxi_flag = true;
			if(exit_taxi_flag){
				NewCollapseDiv("rgb(255, 127, 14)","Taxi",1,CollapseContainer)
				tianjiantable(data_taxi, 1)
				exit_taxi_flag = false;
			}
		})
		//举个例子，会删除
		NewCollapseDiv("rgb(255, 127, 14)","Road",0,CollapseContainer1);
//		NewCollapseDiv("#14CA82","Taxi",1,CollapseContainer);
		tianjiantable(data_road, 0);
//		tianjiantable(data_taxi, 1);
		
		
		$("#cli_delect").on("click", function(){
//			let temp = divChildList.pop()
//			temp.remove()
			var setLength = divChildList.length;
			for(var l = 0; l<setLength; l++){
				let temp = divChildList.pop();
				temp.remove();
			}
			exit_taxi_flag = true;
			exit_road_flag = true;
		})

		$("#cli_test").on("click", function(){
			
//			$('#Msgtable0').bootstrapTable('removeAll');
////			data_haha = [{'Name':'Road1','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'Road2','V1':"hi",'V2':"ho",'V3':"hp"}, {'Name':'Road3','V1':"hi",'V2':"ho",'V3':"hp"}]
//			data_haha.push({
//				'Name': 'Road' + table_count,
//				'V1':"hi",
//				'V2':"ho",
//				'V3':"hp"
//			})
//			for (var i = 0; i<delect_d.length; ++i){
//				for(var k = 0; k<data_haha.length; ++k){
//					if(delect_d[i].Name == data_haha[k].Name){
//						data_haha.splice(k, 1);
//						break;
//					}
//				}
//			}
//			for(var j = 0; j < data_haha.length; j++) {
//              var dataTree2 = data_haha[j];
//              $('#Msgtable0').bootstrapTable('append', dataTree2);
//          }
//			$('td').css('padding','6px 4px 4px 8px');
//			$('th').css('padding','6px 4px 6px 12px');
//			delect_d = [];
			table_count++;
		})
		
		
		var drag_fala = false;
		$("#main_tool").draggable({
			cursor: "move",
			start: function(){
				drag_fala = true
			}
		})
		$( ".main_butt" ).on("click", function() {
			  if(!drag_fala){
				  	$(this).toggleClass( "active" );
				  	$(".icons").toggleClass( "open" );
			  }else{
			  	drag_fala = false;
			  }
			});
		
		var pre_test_flag = true;
		$("#pre_test").on("click", function(){
			$(this).toggleClass( "change_radius" );
			$("#pre_table").slideToggle(300)
			if(pre_test_flag){
				$("#pre_icon").removeClass("fa-chevron-down").addClass("fa-chevron-up");
				pre_test_flag = false;
			}else{
				$("#pre_icon").removeClass("fa-chevron-up").addClass("fa-chevron-down");
				pre_test_flag = true;
			}
		})
		$(".weather_icon li").click(function(){
			$(this).children().css("color", "yellow");
			$(".weather_icon li").not(this).children().css("color", "#D3D3D3")
			})
		
		$(".week_text li").click(function(){
			$(this).children().css("color", "yellow");
			$(".week_text li").not(this).children().css("color", "#D3D3D3")
			})
		var timelable = ["00:00", "06:00", "12:00", "18:00", "24:00"];
		
		$(".slider")
				.slider({ 
				    min: 0, 
				    max: 24, 
				    step: 1/6
				})
				.slider("pips", {
				    rest: "label",
				    step: 36
				})
				.slider("float");
		var title_svg = d3.select("#title_svg").append("svg")
											   .attr("width", 1000)
											   .attr("height", 35)
		var title_svg_g = title_svg.append("g")
								   .attr("class", "title_svg_g")
		var polygondata = [[0, 0], [75, 0], [85, 15], [75, 30], [0, 30]]
		var polygondata1 = [[80, 0], [153, 0], [163, 15], [153, 30], [80, 30], [90, 15]]
		function drawPoly(svgName,params, parcolor, className){
			svgName.append("svg:polygon")
				   .style("fill", parcolor)
			       .attr("class", className)
			       .attr("points", params);
		}
		drawPoly(title_svg_g,polygondata, "#66ABDD", "p"), drawPoly(title_svg_g,polygondata1, "#66ABDD", "p");
		
		var text_flow = title_svg_g.append("text")
							   	   .attr("class", "text_flow")
							       .attr("fill", "white")
							       .attr("x", 22)
							       .attr("y", 20)
							       .attr("font-family", "georgia")
							       .attr("font-size", "12px")
							       .style("font-weight", "600")
							       .text("Speed")
		
		var text_speed = title_svg_g.append("text")
							   	   .attr("class", "text_speed")
							       .attr("fill", "white")
							       .attr("x", 105)
							       .attr("y", 20)
							       .attr("font-family", "georgia")
							       .attr("font-size", "12px")
							       .style("font-weight", "600")
							       .text("Flow")
		
		$("#addPOI").on("click", function(){
			NewPoiDiv();
		})
		
		var POI_contain = document.getElementById("POIcontain");
		var POIcontainList = [];
		
		function NewPoiDiv(){
			let newDiv = document.createElement("div");
			newDiv.style = "position: relative; width: 100%; height: 40px;"
			let newInput = document.createElement("input");
			newInput.className = 'selectPOI'
			newInput.style = "border-radius: 3px; position: absolute; left: 155px; top: 10px; height: 30px; width: 210px; outline: none;  font-family: georgia; z-index: 1; font-weight: 700;"
			let newI1 = document.createElement("i");
			newI1.className = 'fa fa-trash-o fa-stack-1x';
			newI1.id = 'trashDiv';
			newI1.style = "position: absolute; top: 11px; left: 375px; width: 20px; height: 20px; font-size: 20px; color: #5E6268;"
			let newI2 = document.createElement("i");
			newI2.className = 'fa fa-angle-down fa-stack-1x';
			newI2.id = 'selectDown';
			newI2.style = "z-index: 2; position: absolute; top: 11px; left: 335px; width: 20px; height: 20px; font-size: 20px; color: #5E6268;"
			let selectDiv = document.createElement("div");
			selectDiv.className = 'selectDiv';
			selectDiv.style = "display: none; z-index: 10; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: absolute; left: 155px; top: 40px; width: 210px; background: #F8F8F8; border-left: 1px solid silver; border-right: 1px solid silver; border-bottom: 1px solid silver;"
			let p1 = document.createElement("p");
			p1.style = "margin: 0px; width: 100%; height: 25px; text-align: center; line-height: 25px; font-family: georgia; font-weight: 700;";
			p1.innerHTML = "Gas station";
			let p2 = document.createElement("p");
			p2.style = "margin: 0px; position: relative; width: 100%; height: 25px; text-align: center; line-height: 25px; font-family: georgia; font-weight: 700;"
			p2.innerHTML = "Supermarket";
			let p3 = document.createElement("p");
			p3.style = "margin: 0px; position: relative; width: 100%; height: 25px; text-align: center; line-height: 25px; font-family: georgia; font-weight: 700;"
			p3.innerHTML = "Bank";
			selectDiv.appendChild(p1);
			selectDiv.appendChild(p2);
			selectDiv.appendChild(p3);
			newDiv.appendChild(newI1);
			newDiv.appendChild(newI2);
			newDiv.appendChild(newInput);
			newDiv.appendChild(selectDiv);
			POI_contain.appendChild(newDiv);
			POIcontainList.push(newDiv);
			
			d3.selectAll("#trashDiv").on("click", function(){
				$(this).parent().remove();
			});
			var preIflag = true;
			d3.selectAll(".selectPOI").on("click", function(){
				let pre_I = $(this).prev()
				$(this).next().slideToggle(300, function(){
					if(preIflag){
						pre_I.removeClass("fa-angle-down").addClass("fa-angle-up");
						preIflag = false;
					}else{
						pre_I.removeClass("fa-angle-up").addClass("fa-angle-down");
						preIflag = true;
					}
				});
				
			});
			d3.selectAll(".selectDiv p").on("click", function(){
				let value_inner = $(this).html();
				let input_val = $(this).parent().prev();
				input_val.val(value_inner);
				$(this).parent().slideUp(300);
				if(preIflag){
						input_val.prev().removeClass("fa-angle-down").addClass("fa-angle-up");
						preIflag = false;
					}else{
						input_val.prev().removeClass("fa-angle-up").addClass("fa-angle-down");
						preIflag = true;
					}
			})
		}
		
		d3.selectAll(".tabsClass li").on("click", function(){
			for(let qq = 0; qq<3; qq++){
				if (qq == $(this).index()){
					$(this).addClass('addtabsClass1').removeClass('addtabsClass2');
				}else{
					$(".tabsClass li").eq(qq).addClass('addtabsClass2').removeClass('addtabsClass1');
				}
			}
		})
		
		//行程数据
		var data_traj = [{'traj': {'time': [0, 33]}}, {'traj': {'time': [56, 64]}}, {'traj': {'time': [72, 84]}}, {'traj': {'time': [105, 131]}}, {'traj': {'road': [17, 184, 184, 447, 237, 578, 241, 241, 0], 'time': [133, 142]}}, {'traj': {'road': [167, 295, 90, 84, 83, 74, 74, 67, 67, 67, 67, 130, 130, 126], 'time': [176, 190]}}, {'traj': {'road': [128, 125, 202, 311, 310, 308, 487, 487, 487, 489, 489, 363, 363, 417], 'time': [191, 205]}}, {'traj': {'road': [179, 179, 179, 181, 179, 181, 179, 181, 181, 181, 179, 179, 181, 179, 179, 179], 'time': [299, 315]}}, {'traj': {'road': [178], 'time': [326, 327]}}, {'traj': {'road': [515, 515, 515, 515, 515, 352, 352, 352, 354, 354, 354, 354, 354, 269, 269, 306, 306, 306, 0, 306, 304, 304, 113, 113, 113, 113, 113, 112, 112, 112, 54, 53, 53, 300, 0, 0], 'time': [346, 382]}}, {'traj': {'road': [297, 475, 475, 475, 475, 111, 111, 55, 55, 1, 1, 1, 1, 3, 3, 3, 5, 5, 6, 6, 72, 79], 'time': [396, 418]}}, {'traj': {'road': [0, 77, 76, 76, 83, 83, 84, 90, 92, 182, 182, 108, 447, 448, 448, 448, 244, 242, 247, 252, 609, 393, 608, 392, 390, 390, 398, 398], 'time': [424, 452]}}, {'traj': {'road': [402, 402, 398, 398, 397, 387, 385, 384, 384, 377, 377, 363, 491, 491, 489, 489, 489, 488, 488, 488, 488, 488], 'time': [458, 480]}}, {'traj': {'road': [414, 414, 414, 491, 491, 489, 489, 489, 489, 489, 487, 487, 487, 308, 308, 309, 311, 213, 201, 201, 198, 198, 123, 123, 123, 115, 115, 115], 'time': [496, 524]}}, {'traj': {'road': [130, 130, 67, 67, 67, 74, 74, 74, 74, 74, 83, 83, 84, 84, 85, 85], 'time': [534, 550]}}, {'traj': {'road': [455, 455, 225, 228, 228, 228, 229, 585, 585, 585, 585, 585, 583, 583, 583, 326, 367, 0], 'time': [574, 592]}}, {'traj': {'road': [228, 228, 224, 453, 453, 454, 144, 139, 141, 141, 143, 143, 143, 85, 85, 0, 0, 0, 85, 143, 143, 294, 294, 295, 293, 293, 438, 439, 441, 441, 441, 441, 441], 'time': [602, 635]}}, {'traj': {'road': [92, 90, 90, 84, 84, 83, 83, 74, 74, 74, 74, 67, 67, 65, 65, 63, 62, 60, 60, 58, 58, 58, 57, 56, 56, 56, 56, 56, 56, 54, 53, 53, 51, 51, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 'time': [646, 693]}}, {'traj': {'road': [0, 0, 0, 0, 0, 0, 0, 0, 60, 63, 63, 65, 0, 0, 0, 0, 0, 0, 0, 0], 'time': [698, 718]}}, {'traj': {'road': [71, 71, 7, 81, 81, 81, 80, 0, 80, 80, 80, 78, 78, 78, 77, 76, 83, 83, 83, 84, 84, 84, 84, 143, 143, 143, 0, 294, 294, 293, 145, 145, 454, 226, 223, 321, 321, 321, 321, 321, 322, 322, 323, 324, 325, 325, 325, 365, 364, 364, 364, 368, 368, 0, 368, 368, 369, 369, 369, 370, 371, 336, 336, 342, 338, 338, 338, 339, 339, 460, 460, 462, 443, 442, 442, 171, 174, 174, 14, 13, 13, 0, 0, 0], 'time': [724, 808]}}, {'traj': {'road': [42, 42, 43, 39, 162, 162, 162, 162], 'time': [810, 818]}}, {'traj': {'road': [105, 106, 106, 106, 106, 106, 107, 169, 168, 168, 168, 168, 230, 229, 229, 0, 229], 'time': [831, 848]}}, {'traj': {'road': [228, 224, 453, 453, 453, 453, 457, 454, 454, 145, 145, 145, 293, 295, 295, 295, 295, 95, 96, 96, 96, 98, 98, 98, 98, 99, 99], 'time': [849, 876]}}, {'traj': {'road': [106, 106, 106, 106, 169, 169, 168, 168, 168, 170, 442, 442, 442, 462, 460, 460, 339, 338, 338, 336, 336], 'time': [883, 904]}}, {'traj': {'road': [336, 336, 346, 346, 599, 599, 599, 384, 498, 496, 496, 0, 437, 437, 437, 523, 523, 0], 'time': [905, 923]}}, {'traj': {'road': [368, 368, 368, 368, 376, 376, 376, 377, 377, 384, 384, 385, 385, 387, 389, 389, 397, 108, 447, 447, 237, 237, 237, 236, 238, 241, 241, 241, 247, 252, 609, 609], 'time': [969, 1001]}}, {'traj': {'road': [608, 608, 380, 380, 380, 380, 607, 386, 610, 610, 610, 610, 0, 0, 0, 0, 496, 496, 497, 497, 497, 497, 494, 433, 433, 433, 433, 433, 433, 433, 433, 433, 433, 432, 432, 432], 'time': [1002, 1038]}}, {'traj': {'road': [425, 426, 414, 414, 414, 414, 414, 492, 492, 492, 324, 328, 328, 328, 328, 334, 334, 334, 334, 334, 337, 337, 337, 338, 338, 339, 442, 442, 176, 173, 174, 174, 174, 13, 167, 167, 167, 170, 170, 176, 176, 176, 171, 170, 167, 167, 167, 92, 93, 91, 91, 67, 0, 66, 65, 65, 652, 652], 'time': [1040, 1098]}}, {'traj': {'road': [66, 66, 66, 67, 67, 67, 203, 74, 74, 83, 83, 84, 85, 85], 'time': [1103, 1117]}}, {'traj': {'road': [139, 139, 455, 455, 321, 321, 321, 321, 321, 488, 488, 488, 488, 488, 486, 484, 484, 484, 484, 413, 413, 413, 0, 420, 420, 419, 419, 419, 675, 675, 419, 418], 'time': [1122, 1154]}}, {'traj': {'road': [353, 0, 353, 0, 353, 0, 0, 0, 594, 534, 534, 661, 538, 538, 0, 0, 0, 0, 0, 0, 0, 0], 'time': [1162, 1184]}}, {'traj': {'road': [363, 363, 368, 368, 376, 376, 376, 377, 377, 384, 384, 385, 386, 607, 608, 382, 382], 'time': [1326, 1343]}}, {'traj': {'road': [380, 608, 609, 253, 252, 241, 238, 238, 236, 236, 235, 232], 'time': [1351, 1363]}}, {'traj': {'road': [167], 'time': [1379, 1380]}}, {'traj': {'time': [1381, 1393]}}]
		var data_traj1 = {'traj': [{'time': [0, 33]}, {'time': [56, 64]}, {'time': [72, 84]}, {'time': [105, 131]}, {'time': [133, 142]}, {'time': [176, 190]}, {'time': [191, 205]}, {'time': [299, 315]}, {'time': [326, 327]}, {'time': [346, 382]}, {'time': [396, 418]}, {'time': [424, 452]}, {'time': [458, 480]}, {'time': [496, 524]}, {'time': [534, 550]}, {'time': [574, 592]}, {'time': [602, 635]}, {'time': [646, 693]}, {'time': [698, 718]}, {'time': [724, 808]}, {'time': [810, 818]}, {'time': [831, 848]}, {'time': [849, 876]}, {'time': [883, 904]}, {'time': [905, 923]}, {'time': [969, 1001]}, {'time': [1002, 1038]}, {'time': [1040, 1098]}, {'time': [1103, 1117]}, {'time': [1122, 1154]}, {'time': [1162, 1184]}, {'time': [1326, 1343]}, {'time': [1351, 1363]}, {'time': [1379, 1380]}, {'time': [1381, 1393]}], 'trip':{'catagory': [[1, 4, 5, 7, 8, 14, 15, 20, 21, 22, 23, 28, 32, 33, 34], [2, 3, 6, 10, 12, 13, 16, 18, 24, 26, 29, 30, 31], [0, 9, 11, 17, 19, 25, 27]], 'Number':[15, 13, 7], 'Fee':[11, 17, 35]}}
		var data_traj2 = {'trip': {'Fee': [11, 17, 35], 'Number': [15, 13, 7], 'catagory': [[1, 4, 5, 7, 8, 14, 15, 20, 21, 22, 23, 28, 32, 33, 34], [2, 3, 6, 10, 12, 13, 16, 18, 24, 26, 29, 30, 31], [0, 9, 11, 17, 19, 25, 27]]}, 'traj': [{'time': [0, 33], 'latlng': [[28.01325035, 120.65765381], [28.01231956, 120.65509796], [28.01207924, 120.65477753], [28.01177979, 120.65322876], [28.01098061, 120.65097046], [28.01082993, 120.65107727], [28.01173019, 120.64759827], [28.01387978, 120.6398468], [28.01487923, 120.63863373], [28.0161705, 120.63694763], [28.0196991, 120.63227081], [28.02006912, 120.63227844], [28.01951981, 120.63233185], [28.01811981, 120.63223267], [28.01715088, 120.62975311], [28.01370049, 120.62796783], [28.01000023, 120.62532043], [28.01082993, 120.62272644], [28.01111984, 120.62180328], [28.01165009, 120.61869812], [28.00880051, 120.61778259], [28.00485039, 120.61595154], [28.00251961, 120.61437988], [27.9950695, 120.61032104], [27.99180031, 120.60980225], [27.99264908, 120.60579681], [27.99346924, 120.60185242], [27.99419975, 120.59854889], [27.99411964, 120.59815216], [27.99345016, 120.60133362], [27.9926796, 120.60510254], [27.99214935, 120.60755157], [27.99169922, 120.60984802]]}, {'time': [56, 64], 'latlng': [[28.01188087, 120.65386963], [28.01313019, 120.65747833], [28.01362038, 120.65878296], [28.01452065, 120.66107178], [28.0157299, 120.66545105], [28.01524925, 120.66918182], [28.0156498, 120.67037964], [28.01712036, 120.67082214]]}, {'time': [72, 84], 'latlng': [[28.01462936, 120.66152191], [28.01147079, 120.65242767], [28.01107025, 120.65132141], [28.01067924, 120.65068054], [28.01128006, 120.64839935], [28.01124954, 120.64402771], [27.99998093, 120.63752747], [27.99736977, 120.63526917], [27.99587059, 120.63140106], [27.99418068, 120.63021851], [27.99308014, 120.63069916], [27.99290085, 120.62985229]]}, {'time': [105, 131], 'latlng': [[28.00621986, 120.64508057], [28.00742912, 120.64447021], [28.00983047, 120.64322662], [28.01095009, 120.6432724], [28.01147079, 120.64562225], [28.01065063, 120.6499176], [28.01070023, 120.65032196], [28.01174927, 120.65332794], [28.01242065, 120.6550827], [28.0135994, 120.65852356], [28.01365089, 120.65859985], [28.01428032, 120.66052246], [28.01512909, 120.66358185], [28.0155201, 120.66519928], [28.01549911, 120.66632843], [28.01510048, 120.67043304], [28.01473045, 120.67321777], [28.01421928, 120.677948], [28.01375008, 120.68167114], [28.0134201, 120.68327332], [28.01305008, 120.68762207], [28.01600075, 120.6882019], [28.01745033, 120.68982697], [28.01712036, 120.690979], [28.01678085, 120.69242096], [28.0175209, 120.69290161]]}, {'time': [133, 142], 'latlng': [[28.01823044, 120.69360352], [28.01771927, 120.69782257], [28.01332092, 120.69698334], [28.00860023, 120.69612122], [28.00538063, 120.69750214], [28.00214958, 120.69817352], [28.00156975, 120.70291901], [28.00124931, 120.70459747], [28.00144958, 120.70539856]]}, {'time': [176, 190], 'latlng': [[28.01561928, 120.66609955], [28.01530075, 120.66539764], [28.01420021, 120.66092682], [28.01320076, 120.65769958], [28.0121994, 120.65457153], [28.01198006, 120.65390015], [28.01107025, 120.65112305], [28.01079941, 120.64997101], [28.01099968, 120.64868164], [28.01140022, 120.64498138], [28.0110302, 120.64315033], [28.0095005, 120.64328003], [28.0074501, 120.64437866], [28.0053196, 120.64531708]]}, {'time': [191, 205], 'latlng': [[28.0055294, 120.6452179], [28.00359917, 120.64443207], [28.00172043, 120.64108276], [27.99876976, 120.64260101], [27.99603081, 120.64495087], [27.99332047, 120.64801788], [27.99080086, 120.65026855], [27.98737907, 120.65322113], [27.98634911, 120.65402985], [27.98583031, 120.65653229], [27.98572922, 120.66192627], [27.9857502, 120.6656723], [27.98564911, 120.66988373], [27.98542976, 120.67420197]]}, {'time': [299, 315], 'latlng': [[28.01523018, 120.68811798], [28.01532936, 120.68813324], [28.01597023, 120.6882019], [28.01606941, 120.68824768], [28.01582909, 120.6882782], [28.01597977, 120.6883316], [28.01594925, 120.68836975], [28.01600075, 120.68827057], [28.01597023, 120.68836975], [28.01597977, 120.6883316], [28.01597023, 120.68827057], [28.01593018, 120.6883316], [28.01601982, 120.68821716], [28.01594925, 120.68827057], [28.01593018, 120.68831635], [28.01594925, 120.68837738]]}, {'time': [326, 327], 'latlng': [[28.01314926, 120.68766785]]}, {'time': [346, 382], 'latlng': [[27.96212006, 120.60968018], [27.96287918, 120.60967255], [27.96417999, 120.60945129], [27.96706963, 120.60887909], [27.96722031, 120.60884857], [27.96776962, 120.60874939], [27.97108078, 120.60820007], [27.97187042, 120.608078], [27.97476959, 120.60774994], [27.97875023, 120.60736847], [27.98291969, 120.60939789], [27.98354912, 120.60993195], [27.9835701, 120.6099472], [27.98559952, 120.61018372], [27.98907089, 120.61019897], [27.99327087, 120.61032867], [27.9959507, 120.61097717], [27.99645042, 120.61128235], [28.00303078, 120.61524963], [28.00662041, 120.61701965], [28.00931931, 120.61798096], [28.0114193, 120.61868286], [28.01222992, 120.61786652], [28.01300049, 120.61398315], [28.01407051, 120.61057281], [28.01592064, 120.60801697], [28.01593018, 120.60800171], [28.0171299, 120.60623169], [28.01791954, 120.60504913], [28.01844978, 120.60420227], [28.02046967, 120.60137939], [28.02112007, 120.59999847], [28.02215004, 120.59718323], [28.02207947, 120.59571838], [28.02222061, 120.59532166], [28.02215004, 120.59522247]]}, {'time': [396, 418], 'latlng': [[28.01403046, 120.60175323], [28.01491928, 120.60233307], [28.01569939, 120.6026535], [28.01823044, 120.60372925], [28.0182991, 120.60379791], [28.01972008, 120.60443115], [28.02009964, 120.60462189], [28.02075005, 120.60489655], [28.02293015, 120.60590363], [28.02314949, 120.60658264], [28.02205086, 120.61049652], [28.02185059, 120.61611938], [28.02260017, 120.61946869], [28.02312088, 120.6217804], [28.02350044, 120.62715149], [28.02350044, 120.62888336], [28.02356911, 120.63262177], [28.02359962, 120.63549805], [28.02364922, 120.63670349], [28.02351952, 120.64061737], [28.0175209, 120.64814758], [28.01792908, 120.65062714]]}, {'time': [424, 452], 'latlng': [[28.01409912, 120.65122223], [28.01469994, 120.65222931], [28.01432991, 120.65354919], [28.01250076, 120.65402985], [28.01205063, 120.65437317], [28.01263046, 120.65595245], [28.01312065, 120.65727234], [28.01408005, 120.66000366], [28.01469994, 120.66194916], [28.01301956, 120.693367], [28.01292992, 120.69381714], [28.01136971, 120.69612122], [28.00888062, 120.69619751], [28.00810051, 120.69722748], [28.00791931, 120.70146942], [28.00791931, 120.70298004], [28.00421906, 120.70517731], [28.00193024, 120.70514679], [28.00098038, 120.70548248], [27.99802017, 120.70903015], [27.99508095, 120.7091217], [27.9890995, 120.71443176], [27.99247932, 120.70770264], [27.98741913, 120.71642303], [27.9843998, 120.71465302], [27.98418045, 120.7145462], [27.98347092, 120.71784973], [27.98316956, 120.71984863]]}, {'time': [458, 480], 'latlng': [[27.98273087, 120.72232056], [27.98336983, 120.72052002], [27.98366928, 120.71778107], [27.98386955, 120.71630096], [27.98397064, 120.71482086], [27.98467064, 120.70407867], [27.98457909, 120.70001984], [27.98451996, 120.69509888], [27.9844799, 120.69123077], [27.98444939, 120.68872833], [27.98461914, 120.68598175], [27.98597908, 120.66594696], [27.98600006, 120.66311646], [27.98600006, 120.66278076], [27.98595047, 120.66149902], [27.98596954, 120.65818024], [27.98603058, 120.65730286], [27.98889923, 120.65516663], [27.98987007, 120.65540314], [27.99073029, 120.65557861], [27.99102974, 120.65567017], [27.99110031, 120.65570068]]}, {'time': [496, 524], 'latlng': [[27.98311996, 120.66641998], [27.98475075, 120.66590118], [27.98500061, 120.66577148], [27.98601913, 120.66387177], [27.98597908, 120.6623764], [27.98583031, 120.66034698], [27.98608017, 120.65630341], [27.98612022, 120.65592194], [27.98620033, 120.65532684], [27.98623085, 120.65483093], [27.98881912, 120.6521225], [27.99183083, 120.64958191], [27.99213028, 120.64933014], [27.99333, 120.64821625], [27.99382019, 120.64777374], [27.9946003, 120.6468277], [27.99729919, 120.64407349], [27.99962997, 120.64185333], [28.00267029, 120.6400528], [28.00271988, 120.64002228], [28.00491905, 120.63822174], [28.0054493, 120.63777161], [28.00720024, 120.63459778], [28.00835037, 120.63159943], [28.00922012, 120.62747955], [28.01016998, 120.62512207], [28.01074982, 120.62348175], [28.0109005, 120.6230011]]}, {'time': [534, 550], 'latlng': [[28.00753021, 120.64441681], [28.00982094, 120.64317322], [28.01128006, 120.64459991], [28.01161957, 120.64653015], [28.0115509, 120.64785004], [28.01065063, 120.65068054], [28.01129913, 120.65215302], [28.01137924, 120.65257263], [28.01147079, 120.65280151], [28.01205063, 120.65393066], [28.01250076, 120.65532684], [28.01283073, 120.65660095], [28.01353073, 120.65843201], [28.0135498, 120.65847015], [28.01398087, 120.6588974], [28.01506996, 120.65812683]]}, {'time': [574, 592], 'latlng': [[28.00577927, 120.66221619], [28.00411987, 120.66201782], [28.00296974, 120.6622467], [28.00242043, 120.66365051], [28.00259972, 120.66490173], [28.00267029, 120.66587067], [28.00271988, 120.66625214], [28.00172043, 120.6663208], [28.00099945, 120.66641998], [28.00037003, 120.66661835], [27.99962997, 120.66703033], [27.99938011, 120.667099], [27.99868011, 120.66729736], [27.9986496, 120.66732025], [27.99597931, 120.6683197], [27.99477959, 120.66861725], [27.99287987, 120.66889954], [27.99238014, 120.66976929]]}, {'time': [602, 635], 'latlng': [[28.00289917, 120.66581726], [28.00264931, 120.66397858], [28.00337029, 120.66281891], [28.00449944, 120.66339874], [28.00580025, 120.66384888], [28.00715065, 120.6639328], [28.00805092, 120.66356659], [28.00839996, 120.66246796], [28.01016998, 120.66162109], [28.01140022, 120.66078186], [28.01250076, 120.65982819], [28.01312065, 120.65943146], [28.01362991, 120.65901947], [28.0143795, 120.65844727], [28.01498032, 120.65814972], [28.01474953, 120.65709686], [28.01440048, 120.65715027], [28.01423073, 120.65766907], [28.01441956, 120.65857697], [28.01320076, 120.65944672], [28.01214981, 120.66031647], [28.01197052, 120.66166687], [28.01218033, 120.66290283], [28.0123291, 120.66526794], [28.0116291, 120.66538239], [28.01111984, 120.66522217], [28.01026917, 120.66806793], [28.00970078, 120.67050171], [28.00934982, 120.67217255], [28.00905037, 120.67421722], [28.00901985, 120.67671967], [28.00900078, 120.67687988], [28.00908089, 120.67552185]]}, {'time': [646, 693], 'latlng': [[28.01465034, 120.66177368], [28.01420021, 120.6602478], [28.01409912, 120.65997314], [28.01342964, 120.65782928], [28.01306915, 120.65692139], [28.01222992, 120.65467834], [28.01222038, 120.65467072], [28.01202011, 120.65405273], [28.01124954, 120.65161896], [28.01102066, 120.65091705], [28.01099968, 120.65090179], [28.01082039, 120.64968109], [28.01144981, 120.64476776], [28.01563072, 120.63762665], [28.01600075, 120.63716888], [28.01639938, 120.63545227], [28.01678085, 120.63282776], [28.01717949, 120.63009644], [28.01728058, 120.62975311], [28.0176506, 120.62827301], [28.01799965, 120.62605286], [28.01841927, 120.62322998], [28.0188694, 120.62062836], [28.01902962, 120.61772919], [28.01930046, 120.6149292], [28.01964951, 120.61192322], [28.01988029, 120.60961914], [28.02020073, 120.60652924], [28.02029991, 120.60517883], [28.02039909, 120.60285187], [28.02121925, 120.59986877], [28.0217495, 120.59838104], [28.02276993, 120.59571838], [28.02319908, 120.5944519], [28.02626991, 120.58702087], [28.02676964, 120.58692169], [28.02957916, 120.58650208], [28.03092957, 120.58612823], [28.03377914, 120.58557892], [28.03676987, 120.58508301], [28.03737068, 120.5849762], [28.04397964, 120.58396912], [28.04652023, 120.58429718], [28.04845047, 120.58477783], [28.05200005, 120.58570099], [28.05278015, 120.58598328], [28.0502491, 120.58519745]]}, {'time': [698, 718], 'latlng': [[28.04548073, 120.5861969], [28.04495049, 120.58622742], [28.04458046, 120.58628082], [28.04361916, 120.58641815], [28.04302025, 120.58653259], [28.0419693, 120.58667755], [28.04121971, 120.58677673], [28.03809929, 120.58786774], [28.01716995, 120.63008118], [28.01652908, 120.63392639], [28.01627922, 120.63625336], [28.01491928, 120.63848114], [28.01416969, 120.64054871], [28.01567078, 120.64177704], [28.01720047, 120.64051819], [28.0183506, 120.64022827], [28.0184803, 120.641922], [28.01869965, 120.64333344], [28.01872063, 120.6441803], [28.0188694, 120.6447525]]}, {'time': [724, 808], 'latlng': [[28.02235031, 120.64611816], [28.02317047, 120.64592743], [28.02351952, 120.64956665], [28.02322006, 120.65193176], [28.02280045, 120.65207672], [28.02212906, 120.65228271], [28.02103043, 120.65264893], [28.01972008, 120.65232849], [28.01857948, 120.65270233], [28.01843071, 120.65271759], [28.01810074, 120.65277863], [28.01745033, 120.65297699], [28.01675034, 120.65294647], [28.01625061, 120.65309906], [28.01493073, 120.65283203], [28.01334953, 120.65387726], [28.01264954, 120.65563202], [28.01275063, 120.65602875], [28.01300049, 120.65647125], [28.01337051, 120.65782928], [28.01338005, 120.65786743], [28.01362038, 120.6583786], [28.01378059, 120.65879822], [28.01328087, 120.65933228], [28.01247978, 120.65995026], [28.01185036, 120.66042328], [28.01236916, 120.66169739], [28.01243019, 120.66397858], [28.0123806, 120.66435242], [28.01180077, 120.66516876], [28.0100708, 120.66493225], [28.00807953, 120.66412354], [28.00625038, 120.66404724], [28.00387001, 120.66287994], [28.00233078, 120.66200256], [28.00057983, 120.66101837], [27.99998093, 120.66065216], [27.99768066, 120.6594162], [27.99558067, 120.65743256], [27.99550056, 120.65737152], [27.99494934, 120.65744781], [27.99431992, 120.66136932], [27.99366951, 120.66436768], [27.99360085, 120.66583252], [27.99361992, 120.66964722], [27.99362946, 120.67086792], [27.99353027, 120.67233276], [27.99143028, 120.67289734], [27.98825073, 120.67362976], [27.98682022, 120.67392731], [27.98648071, 120.67402649], [27.98567963, 120.6746521], [27.98567009, 120.67487335], [27.98508072, 120.67649841], [27.98542976, 120.67917633], [27.98538017, 120.68074799], [27.98601913, 120.68122101], [27.98752975, 120.68106842], [27.9876194, 120.68108368], [27.99011993, 120.68112183], [27.99111938, 120.68115234], [27.99547958, 120.68103027], [27.99740028, 120.68047333], [27.99814987, 120.68038177], [27.99892998, 120.68029785], [27.99991989, 120.67990112], [28.00053024, 120.67967224], [28.00164986, 120.67987061], [28.00247002, 120.67955017], [28.0039196, 120.67932129], [28.00597, 120.67891693], [28.00785065, 120.67855072], [28.00897026, 120.67838287], [28.01127052, 120.67832184], [28.01292992, 120.6784668], [28.01527977, 120.67857361], [28.01902962, 120.67906952], [28.01925087, 120.67910004], [28.02001953, 120.67922974], [28.0204792, 120.6771698], [28.02087021, 120.67269897], [28.02267075, 120.67106628], [28.02342033, 120.67088318], [28.02382088, 120.6697464]]}, {'time': [810, 818], 'latlng': [[28.02425003, 120.66851807], [28.02478027, 120.66870117], [28.0263195, 120.66960144], [28.02700043, 120.66841888], [28.02804947, 120.66455078], [28.02857971, 120.66062164], [28.02857971, 120.65802002], [28.02853012, 120.65756989]]}, {'time': [831, 848], 'latlng': [[28.02142906, 120.66750336], [28.01980019, 120.66732788], [28.0197506, 120.66744995], [28.01931953, 120.66899872], [28.01898003, 120.66989899], [28.01861954, 120.6712265], [28.01844978, 120.67221832], [28.01717949, 120.67404938], [28.01622963, 120.67433167], [28.01556969, 120.6740036], [28.0155201, 120.67397308], [28.0150795, 120.67379761], [28.00337982, 120.66972351], [28.00301933, 120.66934967], [28.00297928, 120.6677475], [28.00308037, 120.66719818], [28.00292015, 120.66625214]]}, {'time': [849, 876], 'latlng': [[28.00263023, 120.66400146], [28.0032692, 120.66272736], [28.00435066, 120.66326904], [28.00505066, 120.66356659], [28.00555038, 120.66377258], [28.00561905, 120.6638031], [28.00600052, 120.66397858], [28.00676918, 120.66391754], [28.00749969, 120.66387939], [28.00856972, 120.66404724], [28.00972939, 120.66484833], [28.01067924, 120.66525269], [28.01096916, 120.66522217], [28.01242065, 120.66526794], [28.01423073, 120.66532898], [28.01527977, 120.66532898], [28.01530075, 120.66532135], [28.01712036, 120.66467285], [28.01823044, 120.66362762], [28.01869965, 120.66327667], [28.01877975, 120.66322327], [28.01914978, 120.66249847], [28.01967049, 120.66204834], [28.02102089, 120.66127014], [28.02141953, 120.66087341], [28.02197075, 120.66052246], [28.02300072, 120.65975189]]}, {'time': [883, 904], 'latlng': [[28.01972008, 120.66748047], [28.01932907, 120.66864777], [28.01873016, 120.67070007], [28.0184803, 120.67157745], [28.01777077, 120.6727829], [28.01717949, 120.67372131], [28.01659966, 120.67437744], [28.01572037, 120.67410278], [28.01523018, 120.67386627], [28.01407051, 120.67825317], [28.01110077, 120.67828369], [28.00970078, 120.67810059], [28.0089798, 120.6781311], [28.00665092, 120.67867279], [28.00374985, 120.6791687], [28.00297928, 120.67932129], [28.00094986, 120.67973328], [28.00016975, 120.67991638], [27.99913025, 120.68013], [27.99677086, 120.68060303], [27.99641991, 120.68067932]]}, {'time': [905, 923], 'latlng': [[27.99564934, 120.68093109], [27.99556923, 120.68094635], [27.99457932, 120.68595123], [27.99282074, 120.69007111], [27.98903084, 120.69049835], [27.98558044, 120.69052887], [27.98489952, 120.69056702], [27.98436928, 120.69075012], [27.98254967, 120.6907196], [27.97742081, 120.69090271], [27.97291946, 120.69097137], [27.97195053, 120.68637848], [27.97105026, 120.68209839], [27.97088051, 120.68122864], [27.97086906, 120.68122101], [27.96928024, 120.68125153], [27.96567917, 120.68182373], [27.96577072, 120.68450165]]}, {'time': [969, 1001], 'latlng': [[27.98554993, 120.67697144], [27.98547935, 120.67769623], [27.98546982, 120.67870331], [27.98538017, 120.68042755], [27.98526955, 120.68212891], [27.98502922, 120.68373108], [27.98469925, 120.68518066], [27.9843502, 120.68752289], [27.98432922, 120.68988037], [27.98438072, 120.69197845], [27.98442078, 120.69654846], [27.9844799, 120.69907379], [27.98450089, 120.70172119], [27.98442078, 120.70507813], [27.98423004, 120.70980072], [27.98393059, 120.71351624], [27.98377037, 120.71555328], [28.01262093, 120.69506836], [28.01065063, 120.69637299], [28.00933075, 120.6962204], [28.0069809, 120.69676971], [28.00460052, 120.69772339], [28.00337029, 120.69796753], [28.00267982, 120.69786835], [28.00197029, 120.70024872], [28.00164986, 120.70240021], [28.00119972, 120.7045517], [28.0011692, 120.70458221], [28.00053024, 120.70661926], [27.99797058, 120.70903015], [27.99604988, 120.70944977], [27.99508095, 120.70905304]]}, {'time': [1002, 1038], 'latlng': [[27.99393082, 120.7084198], [27.99259949, 120.70773315], [27.99214935, 120.70777893], [27.99060059, 120.71121979], [27.99107933, 120.71047211], [27.99208069, 120.7080307], [27.99209976, 120.70742798], [27.98637962, 120.70427704], [27.98430061, 120.70324707], [27.98072052, 120.70275116], [27.97767067, 120.70288086], [27.97431946, 120.70290375], [27.97389984, 120.70149994], [27.97382927, 120.69875336], [27.97360039, 120.69657135], [27.97312927, 120.69252777], [27.97332001, 120.69111633], [27.97643089, 120.69104767], [27.97797012, 120.69003296], [27.97739983, 120.6867218], [27.97661972, 120.68341827], [27.97652054, 120.68308258], [27.97574997, 120.68058014], [27.97509956, 120.67877197], [27.97495079, 120.67835236], [27.97481918, 120.67790222], [27.97450066, 120.67671967], [27.97442055, 120.67642975], [27.97438049, 120.67632294], [27.97407913, 120.67514801], [27.97373009, 120.67392731], [27.97356987, 120.67333221], [27.97327995, 120.67230225], [27.97291946, 120.67077637], [27.97262955, 120.66954803], [27.97267914, 120.66937256]]}, {'time': [1040, 1098], 'latlng': [[27.97512054, 120.66854858], [27.97713089, 120.66806793], [27.97789955, 120.66782379], [27.97932053, 120.66738129], [27.9804306, 120.66694641], [27.98417091, 120.66609955], [27.98551941, 120.66557312], [27.98603058, 120.66542053], [27.98834991, 120.66494751], [27.99160004, 120.66513062], [27.99357033, 120.6664505], [27.9937191, 120.6725769], [27.99438095, 120.6725235], [27.99497986, 120.67237854], [27.9958992, 120.67220306], [27.9964695, 120.6727829], [27.9967308, 120.67402649], [27.99687004, 120.67447662], [27.99703026, 120.67513275], [27.99710083, 120.67552185], [27.9973793, 120.676651], [27.99777985, 120.67816925], [27.9980793, 120.67935181], [27.99827003, 120.68026733], [28.00029945, 120.68005371], [28.00222969, 120.67962646], [28.00933075, 120.67826843], [28.01180077, 120.67836761], [28.01384926, 120.67881775], [28.01631927, 120.67857361], [28.01869965, 120.67907715], [28.0189991, 120.67915344], [28.0196991, 120.67922974], [28.02033043, 120.67826843], [28.01532936, 120.66771698], [28.0150795, 120.6704483], [28.01478004, 120.67308044], [28.01453018, 120.67462921], [28.01420021, 120.6780777], [28.01387978, 120.68105316], [28.01366997, 120.68263245], [28.01395035, 120.68103027], [28.01448059, 120.67855072], [28.01448059, 120.67542267], [28.01479912, 120.67299652], [28.01506996, 120.67063141], [28.01561928, 120.66577148], [28.01506996, 120.66327667], [28.0155201, 120.66256714], [28.01585007, 120.66156769], [28.01645088, 120.66145325], [28.01157951, 120.64572906], [28.01128006, 120.64318085], [28.0134201, 120.64031982], [28.01515007, 120.63818359], [28.01614952, 120.63687134], [28.01169968, 120.63684845], [28.01218033, 120.63674927]]}, {'time': [1103, 1117], 'latlng': [[28.01334953, 120.64026642], [28.01137924, 120.6427002], [28.01132011, 120.6427536], [28.01098061, 120.64324951], [28.01152992, 120.64572906], [28.01110077, 120.64877319], [28.0107708, 120.65019989], [28.01157951, 120.65271759], [28.01165009, 120.65294647], [28.01227951, 120.65502167], [28.01259995, 120.65588379], [28.01342964, 120.65808105], [28.01409912, 120.65888214], [28.01442909, 120.65865326]]}, {'time': [1122, 1154], 'latlng': [[28.00942039, 120.66207886], [28.00844955, 120.66220093], [28.00720024, 120.66210175], [28.00418091, 120.66197205], [28.00167084, 120.66169739], [27.99897957, 120.6602478], [27.99736977, 120.65927887], [27.99530029, 120.65721893], [27.99526978, 120.65720367], [27.99342918, 120.65609741], [27.99024963, 120.65540314], [27.98995018, 120.65532684], [27.98673058, 120.65453339], [27.98654938, 120.65447235], [27.98357964, 120.65197754], [27.98171997, 120.65023041], [27.97923088, 120.64772797], [27.97577095, 120.64682007], [27.97212982, 120.64685059], [27.97207069, 120.64897919], [27.97278023, 120.65087891], [27.97299957, 120.65142822], [27.97159958, 120.65249634], [27.96899986, 120.6543808], [27.96953011, 120.65685272], [27.96851921, 120.65950012], [27.96603012, 120.66127777], [27.9647007, 120.66226959], [27.96368027, 120.6625824], [27.96352959, 120.66268158], [27.96430016, 120.6625824], [27.96412086, 120.6601181]]}, {'time': [1162, 1184], 'latlng': [[27.9733696, 120.59977722], [27.97319984, 120.6000824], [27.97304916, 120.60178375], [27.97278023, 120.60175323], [27.97293091, 120.6014328], [27.97341919, 120.59757996], [27.97356987, 120.59619904], [27.97374916, 120.59568024], [27.97278023, 120.59420013], [27.97139931, 120.59020233], [27.97254944, 120.5868988], [27.9728508, 120.58587646], [27.97386932, 120.58242798], [27.97514915, 120.57792664], [27.97397041, 120.57662201], [27.97200012, 120.57557678], [27.97159958, 120.57537079], [27.97036934, 120.57472992], [27.96929932, 120.57417297], [27.96705055, 120.57292938], [27.96647072, 120.57221985], [27.96735001, 120.57308197]]}, {'time': [1326, 1343], 'latlng': [[27.98576927, 120.66622925], [27.98567963, 120.66996765], [27.98567009, 120.67492676], [27.98533058, 120.68032074], [27.98522949, 120.68235016], [27.98508072, 120.68341827], [27.98472977, 120.68520355], [27.98430061, 120.68842316], [27.98430061, 120.69024658], [27.9843502, 120.69519806], [27.9843998, 120.69847107], [27.98457909, 120.70334625], [27.98913002, 120.70612335], [27.99175072, 120.70747375], [27.99419975, 120.70881653], [27.99385071, 120.71131897], [27.99321938, 120.71289825]]}, {'time': [1351, 1363], 'latlng': [[27.99160004, 120.7090683], [27.99410057, 120.70871735], [27.99600029, 120.70974731], [27.99728012, 120.71027374], [27.99962997, 120.7080307], [28.00180054, 120.70202637], [28.00239944, 120.69895172], [28.00255013, 120.69867706], [28.00278091, 120.69470215], [28.00289917, 120.69191742], [28.00303078, 120.68917847], [28.00428009, 120.68852997]]}, {'time': [1379, 1380], 'latlng': [[28.01499939, 120.67172241]]}, {'time': [1381, 1393], 'latlng': [[28.01531982, 120.66841888], [28.01536942, 120.66806793], [28.01911926, 120.66301727], [28.0212307, 120.66136932], [28.02314949, 120.65962219], [28.02326965, 120.657547], [28.02352905, 120.65297699], [28.02524948, 120.65087891], [28.02683067, 120.64859772], [28.02627945, 120.64541626], [28.02618027, 120.64357758], [28.02611923, 120.64372253]]}]}
		function drawTrajrect(data){
			var Triangledata1 = [[0, 0], [18, 0], [9, 9]],  Triangledata2 = [[0, 68], [18, 68], [9, 59]]
			var svg3 = d3.select("#view1").append("svg")
										  .attr("width", 318.5)
										  .attr("height", 68)
										  .attr("class", "svg3")
			var scale = d3.scaleLinear()
			              .domain([0, 1440])
			              .range([9, 309.5]);
			var trajrect = svg3.selectAll("rect")
							   .data(data.traj)
							   .enter()
							   .append("rect")
							   .attr("fill", "#2FC25B")
							   .attr("x", function(d,j){
								   return scale(d.time[0]) 
								})
							   .attr("y", 19)
							   .attr("height", 40)
							   .attr("width", function(d, i){
							  	   return scale(d.time[1])-scale(d.time[0])
							    })
							    .attr("class", "rect3");
//			drawPoly(svg3, Triangledata1, "red", "p2"); 
			drawPoly(svg3, Triangledata2, "red", "p1");
			
			var vLine1 = svg3.append("line")
                             .attr("class", "focusLine1")
                             .attr("stroke","black")
                             .attr("stroke-dasharray",4)//设置虚线
                             .style("display", "none");
			var TimeText1 = svg3.append("text")
								.attr("class", "TimeText")
							    .attr("fill", "#5E6268")
							    .attr("x", 7)
							    .attr("y", 13)
							    .text("00:00")
			
			var TimeText2 = svg3.append("text")
								.attr("class", "TimeText")
							    .attr("fill", "#5E6268")
							    .attr("x", 265)
							    .attr("y", 13)
							    .text("00:00")
			var coordinate;
			var rect3contain = d3.selectAll(".rect3")
			
			d3.select(".p1").call(d3.drag().on("drag", function(){
						
						d3.select(".p1").attr("transform", function(){
							if(d3.event.x < 9){
								coordinate = 0;
							}else if(d3.event.x > 291.5){
								coordinate = 291.5;
							}else{
								coordinate = d3.event.x;
							}
							return "translate("+coordinate+",0)"
						})
//						d3.select(".p2").attr("transform", function(){
//							return "translate("+coordinate+",0)"
//						})
						vLine1.attr("x1", coordinate+9)
		            	      .attr("y1", 19)
		            	      .attr("x2", coordinate+9)
		            	      .attr("y2", 59);
		            	vLine1.style("display", null);
		            	
		            	for(var j = 0; j<data.traj.length; j++){
		            		let rect3X = parseFloat(rect3contain._groups[0][j].attributes[1].value),
		            			rect3X1 = rect3X + parseFloat(rect3contain._groups[0][j].attributes[4].value);
		            		let TimeHour, TimeMinute, TimeHour1, TimeMinute1, TimeString, TimeString1, selectedFlag = true, J_last;
		            		if((coordinate+9)>=rect3X && (coordinate+9)<=rect3X1){
		            			d3.select(rect3contain._groups[0][j]).attr("fill", "yellow")
		            			TimeHour = parseInt(data.traj[j].time[0]/60);
		            			TimeMinute = data.traj[j].time[0]%60;
		            			TimeHour1 = parseInt(data.traj[j].time[1]/60);
		            			TimeMinute1 = data.traj[j].time[1]%60;
		            			if(TimeHour<10){
		            				TimeHour = "0"+TimeHour
		            			}
		            			if(TimeHour1<10){
		            				TimeHour1 = "0"+TimeHour1
		            			}
		            			if(TimeMinute<10){
		            				TimeMinute = "0"+TimeMinute
		            			}
		            			if(TimeMinute1<10){
		            				TimeMinute1 = "0"+TimeMinute1
		            			}
		            			TimeString = TimeHour+":"+TimeMinute
		            			TimeString1 = TimeHour1+":"+TimeMinute1
		            			TimeText1.text(TimeString); 
		            			TimeText2.text(TimeString1);
		            		}else{
		            			d3.select(rect3contain._groups[0][j]).attr("fill", "#2FC25B");
		            			d3.select(rect3contain._groups[0][data.traj.length-1]).attr("fill", "#2FC25B");
		            		}
		            	}
					})
				   .on("end", function(){
				   		vLine1.style("display", "none");
				   		for(var i = 0; i<data.traj.length; i++){
				   			let rect3X = parseFloat(rect3contain._groups[0][i].attributes[1].value),
		            			rect3X1 = rect3X + parseFloat(rect3contain._groups[0][i].attributes[4].value);
		            		if((coordinate+9)>=rect3X && (coordinate+9)<=rect3X1){
		            			d3.select(".trip1").remove();
		            			d3.selectAll(".awesome-marker").remove();
		            			var greenMarker = L.AwesomeMarkers.icon({
									    icon: 'coffee',
									    markerColor: 'green',
									    extraClasses:'fa-home hahapu',
									  });
								var marker = L.marker(data.traj[i].latlng[0], {
										icon: greenMarker,
										title:"In",
									 }).addTo(map);
								var redMarker = L.AwesomeMarkers.icon({
									    icon: 'coffee',
									    markerColor: 'red',
									    extraClasses:'fa-home hahapu',
									  });
								var marker = L.marker(data.traj[i].latlng[data.traj[i].latlng.length-1], {
										icon: redMarker,
										title:"Out",
									 }).addTo(map);
		            			var polyline = L.polyline(data.traj[i].latlng, {color: 'red', className: 'trip1'}).addTo(map)
		            		}else{
		            			
		            		}
				   		}
				   		
			   }));
		}
		drawTrajrect(data_traj2)
		function distanceStatistics(data){
			var wi4 = 318.5,he4 = 250, padding4 = {top:20, bottom:30, left:30, right:30};
			var svg4 = d3.select("#view1").append("svg")
										  .attr("width", wi4)
										  .attr("height", he4)
										  .attr("class", "svg4")
			var xax4 = wi4-padding4.left-padding4.right;
		    var yax4 = he4-padding4.top-padding4.bottom;
		    var lengthMaxN = d3.max(data.trip.Number)*1.2;
		    var lengthMaxF = d3.max(data.trip.Fee)*1.2;
		    var xSca4 = d3.scaleBand()
		                 .domain(["Short", "Middle", "Long"])
		                 .range([0,xax4]);
		    var ySca4N = d3.scaleLinear()
		                 .domain([0, lengthMaxN])
		                 .range([yax4,0]);
		    var ySca4F = d3.scaleLinear()
		                 .domain([0, lengthMaxF])
		                 .range([yax4,0]);
		    var colorOrdinalN = d3.scaleQuantize()
						  		  .domain([d3.min(data.trip.Number), d3.max(data.trip.Number)])
						  		  .range(["#7BDB91", "#1E9C48", "#074F24"])
			colorN = ["#FFDCDC", "#FC7486", "#F04864"]
			colorF = ["#FFE7BA", "#FFA940", "#FA8C16"]
		    var xAxisL4 = d3.axisBottom(xSca4)
		              
			var yAxisL4 = d3.axisLeft(ySca4N)
			                .ticks(10)
			
			var yAxisL4F = d3.axisRight(ySca4F)
			                .ticks(10)
			
			var gX4 = svg4.append("g")
			            .attr("transform","translate("+padding4.left+","+(he4-padding4.bottom)+")")
			            .attr("class","gx4")
			            .call(xAxisL4)
			
			var gY4 = svg4.append("g")
			            .attr("transform","translate("+padding4.left+","+(he4-yax4-padding4.bottom)+")")
			            .attr("class", "gy4")
			            .call(yAxisL4);
			            
			var gY4F = svg4.append("g")
			            .attr("transform","translate("+(wi4-padding4.right)+","+(he4-yax4-padding4.bottom)+")")
			            .attr("class", "gy4F")
			            .call(yAxisL4F);
			            
			var rectStep = xSca4.step(), rectWidth = xSca4.step()/3;
			var rect4 = svg4.selectAll(".rect4")
						    .data(data.trip.Number)
						    .enter()
						    .append("rect")
						    .attr("fill", function(d, i){
						    	var colorhaha
						    	if(d == d3.max(data.trip.Number)){
						    		colorhaha = colorN[2]
						    	}else if(d == d3.min(data.trip.Number)){
						    		colorhaha = colorN[0]
						    	}else{
						    		colorhaha = colorN[1]
						    	}
						    	return colorhaha
						    })
						    .attr("x", function(d,j){
						  		  return padding4.left-7+rectStep/4+j*rectStep
						    })
						    .attr("y", function(d, i){return he4-padding4.bottom-(ySca4N(0)-ySca4N(d))})
						    .attr("height", function(d,i){
						    	return ySca4N(0)-ySca4N(d)
						    })
						    .attr("width", rectWidth)
						    .attr("class", "rect4")
						    .on("mouseover",function(d,i){
							    	let rect3ccc = d3.selectAll(".rect3"), cccc = d3.select(this)._groups[0][0].attributes[0].value;
								    let j = 0, len = data.trip.catagory[i].length;
								    for(; j<len; j++){
								    	d3.select(rect3ccc._groups[0][data.trip.catagory[i][j]]).attr("fill", cccc)
								    }
							    })
						    .on("mouseout",function(d,i){
						    	let rect3ccc = d3.selectAll(".rect3")
								    let j = 0, len = data.trip.catagory[i].length;
								    for(; j<len; j++){
								    	d3.select(rect3ccc._groups[0][data.trip.catagory[i][j]]).attr("fill", "#2FC25B")
								    }
						    });
			var rect5 = svg4.selectAll(".rect5")
						    .data(data.trip.Fee)
						    .enter()
						    .append("rect")
						    .attr("fill", function(d, i){
						    	let colorhaha
						    	if(d == d3.max(data.trip.Fee)){
						    		colorhaha = colorF[2]
						    	}else if(d == d3.min(data.trip.Fee)){
						    		colorhaha = colorF[0]
						    	}else{
						    		colorhaha = colorF[1]
						    	}
						    	return colorhaha
						    })
						    .attr("x", function(d,j){
						  		  return padding4.left-7+rectStep/4+j*rectStep+rectWidth
						    })
						    .attr("y", function(d, i){return he4-padding4.bottom-(ySca4F(0)-ySca4F(d))})
						    .attr("height", function(d,i){
						    	return ySca4F(0)-ySca4F(d)
						    })
						    .attr("width", rectWidth)
						    .attr("class", "rect4")
						    .on("mouseover",function(d,i){
							    	let rect3ccc = d3.selectAll(".rect3"), cccc = d3.select(this)._groups[0][0].attributes[0].value;
								    let j = 0, len = data.trip.catagory[i].length;
								    for(; j<len; j++){
								    	d3.select(rect3ccc._groups[0][data.trip.catagory[i][j]]).attr("fill", cccc)
								    }
							    })
						    .on("mouseout",function(d,i){
						    	let rect3ccc = d3.selectAll(".rect3")
								    let j = 0, len = data.trip.catagory[i].length;
								    for(; j<len; j++){
								    	d3.select(rect3ccc._groups[0][data.trip.catagory[i][j]]).attr("fill", "#2FC25B")
								    }
						    });;
			var dataRect = ["#F04864", "#FA8C16"]
			var rect6 = svg4.selectAll(".rect6")
							.data(dataRect)
							.enter()
							.append("rect")
							.attr("fill", (d,i)=>d)
							.attr("x", (d,i)=>padding4.left+30+i*105)
							.attr("y", 10)
							.attr("width", "15")
							.attr("height", "15")
							.attr("class", "rect6")
			var dataText = ["Trip number", "Average fee"]
			var text6 = svg4.selectAll(".text6")
							.data(dataText)
							.enter()
							.append("text")
							.attr("fill", "black")
							.attr("x", (d,i)=>padding4.left+50+i*105)
							.attr("y", 22)
							.style("font-weight", "600")
			                .style("font-family", "georgia")
			                .style("font-size", "11px")
							.attr("class", "text6")
							.text(function(d){
								return d
							})
			var text4 = svg4.selectAll(".text4")
			                .data(data.trip.Number)
			                .enter()
			                .append("text")
			                .attr("class",".text4")
			                .attr("fill","white")
			                .attr("text-anchor","middle")
			                .attr("x",(d,i)=>padding4.left-7+rectStep/4+i*rectStep)
			                .attr("y",(d,i)=>he4-padding4.bottom-(ySca4N(0)-ySca4N(d)))
			                .attr("dx",rectWidth/2)
			                .attr("dy","1em")
			                .style("font-weight", "600")
			                .style("font-family", "georgia")
			                .style("font-size", "12px")
			                .text(function(d){
			              	  return d;
			                });
			var text5 = svg4.selectAll(".text5")
			                .data(data.trip.Fee)
			                .enter()
			                .append("text")
			                .attr("class",".text5")
			                .attr("fill","white")
			                .attr("text-anchor","middle")
			                .attr("x",(d,i)=>padding4.left-7+rectStep/4+i*rectStep+rectWidth)
			                .attr("y",(d,i)=>he4-padding4.bottom-(ySca4F(0)-ySca4F(d)))
			                .attr("dx",rectWidth/2)
			                .attr("dy","1em")
			                .style("font-weight", "600")
			                .style("font-family", "georgia")
			                .style("font-size", "12px")
			                .text(function(d){
			              	  return d;
			                });
		}
		distanceStatistics(data_traj2);
		
		$("#view2Tab").on("click", function(){
			$("#view1").animate({
			    opacity: "0",
			    left:'-312.5px',
			}, 500, function(){
				$(this).css("display", "none")
			})
			$("#view2").css("display", "block")
						.animate({
							opacity: "1",
						    left:'6px',
						}, 500)
					})
		$("#view1Tab").on("click", function(){
			$("#view1").css("display", "block")
						.animate({
							opacity: "1",
						    left:'6px',
						}, 500)
			$("#view2").animate({
			    opacity: "0",
			    left:'324.5px',
			}, 500, function(){
				$(this).css("display", "none")
			})
		})
		
		var buju3SameDivFlag = true;
		d3.selectAll(".buju3SameDiv").on("click", function(){
			if(buju3SameDivFlag){
				$(".buju3SameDiv").each(function(){
					$(this).animate({
						top: '95px',
					})
					$(this).find("i").removeClass("fa-plus").addClass("fa-close").css("color", "black");
				})
				$(".flowAnimationDiv").slideDown();
				buju3SameDivFlag = false;
			}else{
				$(".flowAnimationDiv").slideUp();
				$(".buju3SameDiv").each(function(){
					$(this).animate({
						top: '10px',
					})
					$(this).find("i").removeClass("fa-close").addClass("fa-plus").css("color", "white");
				})
				buju3SameDivFlag = true;
			}
		})
		
		var cli_positionFlag = true;
		$('#cli_position').on("click", function(){
			if(cli_positionFlag){
				var latlngCount = 1;
				map.on("click", onMapclick)
				$("#cli_position .sameI").css("color", "yellow")
//				$("#cli_trash .sameI").css("color", "red")
				cli_positionFlag = false;
			}else{
				map.off("click", onMapclick)
				$("#cli_position .sameI").css("color", "#5E6268")
//				$("#cli_trash .sameI").css("color", "#5E6268")
				cli_positionFlag = true;
			}
		})
		$('#cli_trash').on('click', function(){
			d3.select(".trip1").remove();
		    d3.selectAll(".awesome-marker").remove();
		})
		
		function GetDistance( lat1,  lng1,  lat2,  lng2){
		    var radLat1 = lat1*Math.PI / 180.0;
		    var radLat2 = lat2*Math.PI / 180.0;
		    var a = radLat1 - radLat2;
		    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
		    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
		    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
		    s = s *6378.137 ;// EARTH_RADIUS;
		    s = Math.round(s * 10000) / 10000;
		    return s;
		}

//------------------------------------------------计算两坐标之间的距离------------------------------------------------
		
});